Формування масиву перевірки з класом - кутові, кутові-реактивні форми

У мене є форма з реалізованим масивом форм, але тут я не можу перевірити в основному, я не знаю, як отримати управління з масиву форми. У мене є помилка, що елементи керування невизначені.

Тут ви можете побачити мій код, що я намагався

<form [formGroup]="myForm">

<div formArrayName="addresses" >
<div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

<div [formGroupName]="i" class="myform">
<label>street</label>
<input type="text" class="form-control" formControlName="street" [class.valid]="address.street.valid"><br><br>
<label>postcode</label>
<input type="text" class="form-control" formControlName="postcode">
</div><br><br>
</div>
</div><br><br>
<pre>form value: <br>{{myForm.value | json}}</pre>
</form>

Ви можете побачити повний робочий приклад тут

https://stackblitz.com/edit/angular-r4jruv?file=app%2Fapp.component.html

Відповіді:

0 для відповіді № 1

ви отримуєте доступ street безпосередньо з address але це фактично в Росії address.controls

<form [formGroup]="myForm">

<div formArrayName="addresses" >
<div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">

<div [formGroupName]="i" class="myform">
<label>street</label>
<input type="text" class="form-control" formControlName="street" [class.valid]="address.controls.street.valid"><br><br>
<label>postcode</label>
<input type="text" class="form-control" formControlName="postcode">
</div><br><br>
</div>
</div><br><br>
<pre>form value: <br>{{myForm.value | json}}</pre>
</form>

це повинно працювати

---

1 для відповіді № 2

Спочатку додати геттер до вашого компонента, щоб скоротити шлях доступу для вашого FormArray контролі

component.ts

fa: FormArray;

ngOnInit() {
const fa = this._fb.array([
this.initAddress(),
]);

this.fa = fa;

this.myForm = this._fb.group({
addresses: fa
});
}

Потім оновіть html

component.html

<div *ngFor="let address of fa.controls; let i=index" class="panel panel-default">
<div [formGroupName]="i" class="myform">
<label>street</label>
<input type="text" class="form-control" formControlName="street" [class.valid]="address.valid"><br><br>
</div>
</div>

Live demo

---

0 для відповіді № 3

Ви можете використовувати статус контролю форми:

<input ... [class.valid]="address.status === "VALID"">

Ось це редагування вашого stackblitz.

---