Angular 2 - 稍后在反應式數組中設置驗證

Question

我正是通過這種方式正確構建表單數組：

this.items.forEach(element => {
                    (<FormArray>this.myFormFixtures.get('fixtures')).push(this.fBuilder.group({
                        id: [element.id],
                        name: [element.name, Validators.required],
                        description: [element.description],
                        startDateTime: this.buildTimeDetails(element.startDateTime),
                        venueId: [element.venueId, Validators.required],
                        participants: this.buildParticipants(element.participants)
                    }));
                });
                this.myFormFixtures.valueChanges
                    .subscribe(formData => this.checkFixturesFormValidity(formData));

“Participants”鍵生成一個數組，其中包含2個具有空值的ID，如下所示：

[
{id: null},
{id: null}
]

默認情況下，2個ID是可選的。 但我想設置兩個參與者ID formControlNames，如果獲得一個值，則需要它。

到目前為止，我的“checkFixturesFormValidity”函數看起來像這樣，但由於某種原因，驗證沒有設置：

checkFixturesFormValidity(formData)
    {
        console.log(formData);

        const control = <FormArray>this.myFormFixtures.controls['fixtures'];

        for (let i = 0; i < control.length; i++) {

            const participantsControl = (<FormArray>this.myFormFixtures.controls['fixtures']).at(i).get('participants') as FormArray;

                if ((((<any>this.myFormFixtures.controls['fixtures']).at(i).controls['participants'].at(0).get('id').value) != null) || (((<any>this.myFormFixtures.controls['fixtures']).at(i).controls['participants'].at(1).get('id').value) != null))
                {
                    (<any>this.myFormFixtures.controls['fixtures']).at(i).controls['participants'].at(0).get('id').setValidators([Validators.required]);
                    (<any>this.myFormFixtures.controls['fixtures']).at(i).controls['participants'].at(1).get('id').setValidators([Validators.required]);
                }


        }

    }

Answer 1

我有點能夠縮短所有這些長屬性路徑，因為在迭代中，我們可以傳遞您在*ngFor命名的對象，因此在方法中我們不需要以this.myFormFixtures.controls....

所以我們在這里做的是為你的選擇設置一個改變事件。 由於我們知道當用戶進行選擇時，如果值為null ，則設置Validators.required 。

所以tbody內容看起來像這樣（縮短）：

<tr *ngFor="let fixture of myFormFixtures.controls.fixtures.controls; 
            let c=index" [formGroupName]="c">
  <td><input type="text" formControlName="name" /></td>
  <td class="teamColumn">
    <div formArrayName="participants">
      <div *ngFor="let thisParticipant of fixture.controls.participants.controls; 
                   let i=index" [formGroupName]="i">
        <!-- We pass the current formgroup and value of dropdown, 
             which is null, 1 or 2 -->
        <select formControlName="id 
           (change)="doSomething(fixture.controls.participants, 
                     thisParticipant.controls.id.value)">
          <option [ngValue]=null>Please select</option>
          <option [ngValue]="1">Team Red</option>
          <option [ngValue]="2">Team Blue</option>
        </select>
      </div>
    </div>
  </td>
</tr>

然后doSomething()看起來像這樣：

// form array and chosen value
doSomething(formArr, val) {
  for (let x of formArr.controls) {
    x.controls.id.setValidators([Validators.required]);
    x.controls.id.updateValueAndValidity();
  }      
}

您的演示： https ： //plnkr.co/edit/hovobDwYUgH3C6fbe7eB？p = preview

PS，如果用戶取消選擇值，則不考慮這一點。