带有ngModel的角度ngFor和窗体错误显示

Question

I have a form where the user can insert as many inputs as they want. They start with 1 input. Each input has a pattern validation. I show an error if the pattern is incorrect. The user can then add a new input field with the add button. The new input field however has the same validation as the first input field. This means if the user puts in a wrong number in the new input field, the error will show on every input field.. How can i solve this, i think the name and #ngmodel has to be unique, but i don't know how i can make it unique over here.

<form #form="ngForm" class="form">
  <div layout="column" flex *ngFor="let item of numbers; let i = index">

  <div layout="row" flex >
    <mat-form-field class="row-margin" flex>
      <input [(ngModel)]="numbers[i].value" name="test" matInput placeholder="Number input" #test="ngModel" pattern="^[0-9]{3}.[0-9]{2}.[0-9]{2}.[0-9]{2}(\.[0-9]{2})?$" flex>
      <mat-error *ngIf="test.errors?.pattern">No valid pattern</mat-error>
    </mat-form-field>
    <!-- only delete elements if list has more dan one element -->
    <button *ngIf="i >= 1" mat-button (click)="deleteNumberFromList(i)">Delete</button>
  </div>      

</div>

    <mat-dialog-actions class="actions" layout="row">
  <button type="submit" mat-button [disabled]="!form.valid" (click)="add()">Save</button>
    </mat-dialog-actions>
</form>

Answer 1

#test="ngModel"

This makes every input having template reference of #test so you are duplicating references.

Insteed of referencing inputs wrap everything with <form #form="ngForm"> and then check for errors using that form. It will be something like

form.controls[controlName].errors 

Also remember that every ngModel input has to have unique name. You can generate it using index variable.

Answer 2

Define array in component and keep pushing in it.

export class AppComponent {
    qtd:any[] = {};
}

id="qtd{{num}}" [(ngModel)]="qtd[num]"