How can i validate dynamic input in formArray individually?-CodePudding

when i add two or more dynamic field and i enter input with cpf number the validation happens when i enter cpf in last field, its possible to validate a input field individually?

<h1>Reactive Form Table Example</h1>

<form [formGroup]="form">
    <ng-container formArrayName="cpfs">
          <table >
            <tr>
            <    th>cpf</th>
            </tr>
            <ng-container *ngFor="let cpf of cpfs.controls; let i = index;">
            <tbody>
                    <tr [formGroupName]="i">
                       <td>
                            <input type="text"  id="cpf" formControlName="cpf" maxlength="11" />
                        </td>
                        <td *ngIf="!isValidCPF('cpf')">
                          CPF é invalido
                        </td>
                        <td>
                            <button (click)="deleteRow(i)" >
                            Delete
                           </button>
                       </td>
                    </tr>
                </tbody>
            </ng-container>
        </table>
        <button type="button" (click)="addCpf()" >
            Add new Row
        </button>
            <button type="submit"  
[disabled]="form.invalid">Submit</button>
        <pre>{{ form?.value | json }}</pre>
        <pre>{{ cpfForm?.value | json }}</pre>
    </ng-container>
</form>

here is a link to the problem, can someone help? https://stackblitz.com/edit/angular-ivy-1d8zur?file=src/app/app.component.ts

CodePudding user response：

I know there is a bug in my forked StackBlitz but does this help? https://stackblitz.com/edit/angular-ivy-8isyv1?file=src/app/app.component.ts

One more thing, you need to avoid using functions in the template as you did with isValidCPF().