/ / Walidacja tablic form z klasą - formy kątowe, kątowo-reaktywne

Formowanie walidacji macierzy z klasą - formy kątowe, kątowo-reaktywne

Mam formularz z zaimplementowaną tablicą formularzy, ale tutaj nie mogę zweryfikować w zasadzie, nie wiem jak uzyskać kontrolę z tablicy formularza. Mam błąd, który kontroluje niezdefiniowane.

Tutaj możesz zobaczyć mój kod, który próbowałem

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

możesz zobaczyć tutaj pełny przykład roboczy

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

Odpowiedzi:

0 dla odpowiedzi № 1

masz dostęp street bezpośrednio z address ale tak naprawdę jest 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>

to powinno działać


1 dla odpowiedzi nr 2

Najpierw dodaj getter do swojego komponentu, aby skrócić ścieżkę dostępu do swojego FormArray sterownica.

component.ts

fa: FormArray;

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

this.fa = fa;

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

Następnie zaktualizuj 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>

Wersja demonstracyjna na żywo


0 dla odpowiedzi № 3

Możesz użyć statusu kontroli formularza:

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

Oto edycja twojego stackblitz.