Angular 5 Reactive Forms：没有将“exportAs”设置为“ngModel”的指令

Question

我正在处理 angular 5 Reactive Forms：我遇到了这个错误：没有将“exportAs”设置为“ngModel”的指令我在其他论坛上看到的问题可能有多种原因：HTML 模板中的拼写错误，忘记导入"FormsModule" 或 "ReactiveFormsModule", ....

我检查了我的代码，但我没有找到问题你能帮我吗！！！

控制台错误：

There is no directive with "exportAs" set to "ngModel" (" 
    [(ngModel)]="user.FirstName" 
    formControlName="FirstName"
    [ERROR ->]#FirstName="ngModel" />
    <label for="firstName">{{ 'FIRST_NAME' | translate:param}}</label>")
   : ng:///AppModule/LoginComponent.html@12:15

app.module.ts:

//angular moudel
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
....

@NgModule({
  declarations: [
    .....
  ],
  imports: [
    BrowserModule,
    FormsModule, 
    ReactiveFormsModule, 
     ...
    AppRoutingMoudel,
  ],
    ...
})

登录组件.ts

import { Component, OnInit } from '@angular/core';
import { User } from './../../../model/user';
import {FormBuilder,FormGroup,FormControl,Validators,NgForm} from  '@angular/forms'
        ....
 export class LoginComponent implements OnInit {

     user : User;
     userLoginForm: FormGroup;

      constructor(private userLoginFormBuilder:FormBuilder) { 

        this.user = new User ("TestName", "Yagmi",
                                    "TestName@Yagmi.com", "esay", "esay");

        this.userLoginForm = this.userLoginFormBuilder.group({
                        FirstName: new FormControl (this.user.FirstName,
                                         [Validators.minLength(4),])
            });
         }
    }

登录组件.html

<form class="col s12" [formGroup]="userLoginForm" (ngSubmit)="saveUserLogin()">

    <div class="row">
      <div class="input-field col s12 m6">

        <input id="firstName" 
               type="text" 
               class="validate"
               [(ngModel)]="user.FirstName" 
               formControlName="FirstName"
               #FirstName="ngModel" />

        <label for="firstName">{{ 'FIRST_NAME' | translate:param }}</label>
        <p class="data-error data-validation" *ngIf="FirstName.errors?.minlength">
          min length is 4 caracters.
        </p>
        <p class="data-error data-validation" *ngIf="FirstName?.touched">
          touched.
        </p>

      </div>
    </div>
  </form>

用户.ts

export class User {
    constructor(
        public FirstName: string,
        public LastName: string,
        public Email: string,
        public Passeword: string,
        public ConfirmPasseword: string
   )
}

Answer 1

我发现我的错误在哪里我一起使用了模板驱动和反应形式，这就是为什么我有错误（在我阅读亚历克斯的评论之后）

解决方案只是从我的 Html 模板中删除所有驱动的模板

<form class="col s12" [formGroup]="userLoginForm" (ngSubmit)="saveUserLogin()">

    <div class="row">
      <div class="input-field col s12 m6">

        <input id="firstName" 
            type="text" 
            class="validate"
           //[(ngModel)]="user.FirstName" ==> to remove template driven
          formControlName="FirstName" //==> to keep reactive forms
         // #FirstName="ngModel" ===> to remove template driven 
   />

            <label for="firstName">{{ 'FIRST_NAME' | translate:param }}</label>
            <p class="data-error data-validation" *ngIf="FirstName.errors?.minlength">
              min length is 4 caracters.
            </p>
            <p class="data-error data-validation" *ngIf="FirstName?.touched">
              touched.
            </p>

          </div>
        </div>
      </form>

也是我的LoginComponent.ts

import {FormBuilder,FormGroup,FormControl,Validators} from '@angular/forms'

==> 删除导入NgForm不需要反应形式

Answer 2

在#FirstName="ngModel" ，引用的组件需要定义“exportAs”值。

例如

@Directive({
 selector: '[tooltip]',
 exportAs: 'tooltip'
})

#FirstName="tooltip"

https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26