web-dev-qa-db-ja.com

Angular-「exportAs」が「ngModel」に設定されたディレクティブはありません

以下は、AngularJSプロジェクトのファイルです。いくつかの投稿で示唆されているように、私は追加しました：

ngModel name="currentPassword" #currentPassword="ngModel

入力フィールドにありますが、それでもエラーが発生します。

package.json

.........
"dependencies": {
        "@angular/common": "^2.3.1",
        "@angular/compiler": "^2.3.1",
        "@angular/core": "^2.3.1",
        "@angular/forms": "^2.3.1",
        "@angular/http": "^2.3.1",
        "@angular/platform-browser": "^2.3.1",
        "@angular/platform-browser-dynamic": "^2.3.1",
        "@angular/router": "^3.3.1",
        "core-js": "^2.4.1",
        "rxjs": "^5.0.1",
        "ts-helpers": "^1.1.1",
        "zone.js": "^0.7.2"
    },
   ...............

change-password.component.html

<form #f="ngForm" [formGroup]="changePasswordForm">
        <div class="form-group">
            <label for="currentPassword">Current Password</label> <input
                placeholder="currentPassword" ngModel name="currentPassword"
                #currentPassword="ngModel" id="currentPassword"
                name="currentPassword" type="text" class="form-control" required
                minlength="6" formControlName="currentPassword">
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Change Password</button>
    </form>

change-password.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, ControlContainer, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.css']
})
export class ChangePasswordComponent implements OnInit {

  changePasswordForm;

  constructor(formBuilder: FormBuilder) {
    this.changePasswordForm = formBuilder.group({
      currentPassword: new FormControl('', Validators.compose([Validators.required]))
    });
  }

  ngOnInit() {
  }

}

app.module.tsにはインポートがあります

............
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule
  ]
...........

次のエラーが表示されます。

未処理のプロミスの拒否：テンプレート解析エラー：「exportAs」が「ngModel」に設定されたディレクティブはありません（「urrent Password]＃currentPassword = "ngModel" id = "currentPassword" name = "currentPassword" type = "text" class = " form-co "）：ChangePasswordComponent @ 5：4; Zone：; Task：Promise.then; Value：SyntaxError {__zone_symbol__error：Error：Template parse errors：" exportAs "が" ngModel "（" urrent Passwo "に設定されたディレクティブはありません……}エラー：テンプレート解析エラー：「exportAs」が「ngModel」に設定されたディレクティブはありません（「urrent Password]＃currentPassword = "ngModel" id = "currentPassword" name = "currentPassword" type = "text" class = 「form-co」）：ChangeErrorComponent @ 5：4 at SyntaxError.ZoneAwareError（ http：// localhost：4200/polyfills.bundle.js：6884： ）SyntaxError.BaseError [コンストラクターとして] （ http：// localhost：4200/vendor.bundle.js：64475：16 ）at新しいSyntaxError（ http：// localhost：4200/vendor.bundle.js：5727： 16 ）

angularangular2-formsangular2-ngmodel
10
Sarath

テンプレート駆動型とモデル駆動型の奇妙な組み合わせを使用しています。どちらかを選択し、これら2つを混合しないでください。モデル駆動型フォームのサンプルは次のとおりです。

テンプレートでrequiredまたはminlengthを設定する必要はありません。コンポーネントでthidを処理します。また、ngModelを使用するため、name、formControlNameなどは必要ありません。また、テンプレート駆動型フォームに関連する#f="ngForm"も削除します。したがって、テンプレートは次のようになります。

<form [formGroup]="changePasswordForm">
  <label for="currentPassword">Current Password</label> 
  <input formControlName="currentPassword">
  <button type="submit">Change Password</button>
</form>

そして、フォームを構築するときに、必要なすべてのバリデーター、この場合はrequiredとminLengthを設定します：

constructor(formBuilder: FormBuilder) {
  this.changePasswordForm = formBuilder.group({
    currentPassword: new FormControl('', 
          Validators.compose([Validators.required, Validators.minLength(6)]))
  });
}

以上です！ :)

フォームについて読むことをお勧めします。テンプレート駆動フォームのガイドおよびリアクティブフォームのガイド

編集：

フォームの検証については、official docsでフォームの検証を確認してください。十分なフィールドがある場合は、すべてのフォームエラーを個別のオブジェクトに保存するソリューションを適応させることができます。

しかし、各フォームコントロールのフォームエラーをチェックする基本的なソリューションは次のとおりです。したがって、検証には次のようになります。

<small *ngIf="changePasswordForm.get('currentPassword').hasError('required')">Required!</small>
<small *ngIf="changePasswordForm.get('currentPassword').hasError('minlength')">Minimum 6 chars</small>

また、フィールドにタッチしたときにエラーメッセージを表示することもできます（??）。これはすべて、検証のために提供したリンクで見つけることができます:)

更新されたデモ

10
AJT82

「@ angular/forms」からimport {FormsModule}を追加します。 app.module.tsにインポートアレイでFormsModuleを追加する必要があります。

答えはかなり遅いですが、誰かがangular 5の問題に悩まされている場合、これを行う必要があります。

7
Bharath R S

これはAngular 6。

ngModelディレクティブを入力コントロールに追加するのを忘れていましたが、#currentPassword="ngModel"私のフォームに。インポートなどはすべて整っていました。

3
Abdul Rehman Sayed

angularテンプレート駆動型フォームを使用し、#xname="ngModel"を使用する場合は、同じ入力で[(ngModel)]="mymodel"ディレクティブも使用する必要があります。もちろん、de上記の他の回答で述べたように、FormsModuleをapp.moduleに

1
Chema