javascript - Angular 5 react 形式 : There is no directive with "exportAs" set to "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

我发现我的错误在哪里 我同时使用了模板驱动和响应式表单 这就是我出错的原因(在我阅读了 Alex 的评论之后)

解决方案就是删除所有从我的 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'

==> 移除 import NgForm 不需要响应式表单