Проверка массива форм с помощью класса

Question

У меня есть форма с реализованным массивом форм, но здесь я не могу проверить в принципе, я не знаю, как получить элементы управления из массива форм. У меня есть ошибка, которая управления неопределена.

Здесь вы можете увидеть мой код, что я пытался

<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

Answer 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>

это должно работать

Answer 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>

Живая демо

Answer 3

Вы можете использовать форму управления статусом:

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

Вот редактирование вашего стекаблица.