web-dev-qa-db-ja.com

Angular 2エラー-RC4バージョンで「exportAs」が「ngModel」に設定されたディレクティブがありません

アプリケーションでangular 2つのフォームを使用しており、指定されたリンクに基づいてフォームを作成しました。

https://angular.io/docs/ts/latest/guide/forms.html

これでは、検証とフォームAPIの使用のために、#name="id" #id="ngModel"のようなngModel値を設定しました。これにより、スクリプトエラーがスローされます。しかし、#id="ngModel"を#id="ngForm"に設定すると解決しました。しかし、私の場合、モデル値をngModelに設定する必要があります。

以下は私のhtmlページです。

 <form (ngSubmit)="onSubmit()" #myForm="ngForm">
  <div class="form-group">
  <label class="control-label" for="id">Employee ID</label>
    <input type="text" class="form-control" required [(ngModel)]="model.id" #name="id"  #id="ngModel" >
    <div [hidden]="id.valid || id.pristine" class="alert alert-danger">
      Employee ID is required
    </div>
  </div>
  <div class="form-group">
    <label for="name">Employee Name</label>
    <input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel" required>
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
      Employee ID is required
        </div>
  </div>
  <div class="form-group">
    <label for="DOJ">DOJ</label>
    <input class="form-control" required [(ngModel)]="model.DOJ" name="DOJ" #DOJ="ngModel"  />
    <div [hidden]="DOJ.valid || DOJ.pristine" class="alert alert-danger">
      DOJ is required
    </div>
  </div>
  <button type="submit" class="btn btn-default" [disabled]="!myForm.form.valid">Submit</button>
</form>

以下は私の問題です。

      EXCEPTION: Template parse errors:
       There is no directive with "exportAs" set to "ngModel" ("
         <div>
          <h1>My Form</h1>
             <form (ngSubmit)="onSubmit()" [ERROR ->]#myForm="ngModel">
             <div class="form-group>
            <label class="control-label" for="id">Employee"):AppComponent@3:34

私はさらに多くの質問と回答を確認しました。それらのほとんどはangular2バージョンをRC4に更新すると言われているので、アプリケーションをrc4に更新しましたが、それでもこの問題に直面しています。

以下は私のtsファイルです：

import {Component} from '@angular/core';
import { disableDeprecatedForms, provideForms , NgForm} from '@angular/forms';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';


@Component({
selector: 'ej-app',    
templateUrl: 'app/app.component.html',
directives: [ CORE_DIRECTIVES,FORM_DIRECTIVES]  
})
  export class AppComponent {
  model = new Employees(null,'','');
    onSubmit() { alert("values submitted")}
   constructor() {
     }
     }
        export class Employees {
         constructor( public id: number,public name: string, public DOJ: String ) {  }
}
javascripttypescriptangularangular2-templateangular2-forms
7
Sasi Dhivya

新しいフォームモジュールと古いフォームモジュールを混在させないでください。

import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/common';

@angular/commonからフォームのものをインポートします。新しいフォームを使用する場合

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()])

代わりに使用してください

import {FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from '@angular/forms';
2
Günter Zöchbauer

FORM_DIRECTIVESとCORE_DIRECTIVESは非推奨であるため、インポートしないでください。代わりに、必ずNgFormをインポートしてください。以下を使用できます。

import {FormGroup, FormBuilder, FormControl, Validators, NgForm } from '@angular/forms';
3
Mwiza