web-dev-qa-db-ja.com

Angular 4配列検証

reactive formのformArray検証の助けが必要です。配列内の各アイテムを検証したいのですが、どうすればいいのかわかりません。ありがとう。

htmlコード：

    <label for="name">name:</label>
    <input formControlName="name" id="name" type="text">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
       <div *ngIf="name.errors.required">
         required
       </div>
    </div>

TypeScriptコード：

 createForm() {
    this.form = this.fb.group({
      person: this.fb.array([this.initItemRows()])
    });
  }

initItemRows() {
    return this.fb.group({
      name: [''],
      info: ['']
    });
  }

  addNewRow() {
    const control = <FormArray>this.form.controls['person'];
    control.Push(this.initItemRows());
  }

  deleteRow(index: number) {
    const control = <FormArray>this.form.controls['person'];
    control.removeAt(index);
  }

  get name() { return this.form.get('person.name'); }
  get info() { return this.form.get('person.info'); }

私はこれを試しました：

initItemRows() {
    return this.fb.group({
      name: ['', Validators.required ],
      info: ['', Validators.required ]
    });
  }

うまくいきません。

arraysformsangularvalidationangular-reactive-forms
8
Jiří Přibil

nameはformArrayであるため、this.form.get('person.name');が存在しないため、infoおよびpersonのゲッターは実際には特定のフォームコントロールをターゲットにしません。あなたの形で。あなたがする必要があるのは、各フォームグループの反復を使用し、そのグループとそのコントロールをターゲットにすることです。したがって、テンプレートは次のようになります。

<div *ngFor="let p of form.controls.person.controls; let i = index" 
             [formGroupName]="i">
  <label for="name">name:</label>
  <input formControlName="name" id="name" type="text">
  <!-- check if the name in this group has the error -->
  <div *ngIf="p.controls.name.dirty">
    <div *ngIf="p.hasError('required', 'name')">Required</div>  
  </div>
</div>

[〜＃〜] demo [〜＃〜]

さらに、コードを少し短くして、フォームグループを初期化/配列に追加するのに本当に必要ではないメソッドを削除することをお勧めします。そこで、ここでaddNewRow、initItemRowsを削除しました新しい行を追加するときに呼び出すことができます。

this.form = this.fb.group({
  person: this.fb.array([])
});
this.initItemRows();

initItemRows() {
  let ctrl = <FormArray>this.form.controls.person;
  ctrl.Push(this.fb.group({
    name: ['', Validators.required],
    info: ['', Validators.required]      
  }))
}
17
AJT82