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,
  ],
    ...
})

LoginComponent.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),])
            });
         }
    }

LoginComponent.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>

user.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