Question

我正在处理角度5活跃表格：我有这个错误： ＆＃34; exportAs＆＃34;没有指令设置为＆＃34; ngModel＆＃34; 我在其他论坛上看到问题可能有很多原因：在HTML模板中拼写错误，忘记导入＆＃34; FormsModule＆＃34;或＆＃34; ReactiveFormsModule＆＃34;，....

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

控制台错误：

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'

==＆GT;删除导入 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

Angular 5 Reactive Forms：没有指令＆＃34; exportAs＆＃34;设置为＆＃34; ngModel＆＃34;

2 个答案: