Angular ngFor与ngModel和表单错误显示-Java 学习之路

我有一个表单，用户可以根据需要插入任意数量的输入 . 他们从1输入开始 . 每个输入都有一个模式验证 . 如果模式不正确，我会显示错误 . 然后，用户可以使用添加按钮添加新的输入字段 . 但是，新输入字段与第一个输入字段具有相同的验证 . 这意味着如果用户在新输入字段中输入错误的数字，则错误将显示在每个输入字段上 . 如何解决此问题，我认为名称和#ngmodel必须是唯一的，但我不知道我怎么能在这里使它独一无二 .

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

enter image description here

2 回答

0
```
#test="ngModel"
```
这使得每个输入都具有 #test 的模板引用，因此您正在复制引用 .

引用 inputs 引用 <form #form="ngForm"> 包装所有内容，然后使用该表单检查错误 . 它会是这样的
```
form.controls[controlName].errors
```
还要记住，每个ngModel输入都必须具有唯一的名称 . 您可以使用索引变量生成它 .
回复于 2024-05-04T01:40:37+08:00

在组件中定义数组并继续推入它 .

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

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

回复于 2024-05-04T01:40:37+08:00

Angular ngFor与ngModel和表单错误显示

2 回答

相关问题