如何动态验证ngFor创建的输入

Question

所以我有下面的一段代码，

<div *ngFor="let test of testModel; index as i">
<input [(ngModel)]="test.key" name="inputTest{{i}}" required="true"
id="inputTest{{i}}" #inputTest{{i}}="ngModel" />
<p *ngIf="inputTest{{i}}.errors?.required"> // Error Line
Field is required!
</p>
</div>

如何验证具有动态id的输入字段，在这种情况下，写ngIf的正确方法是什么？

提前感谢！

Answer 1

您需要使用formArray，请在下面找到一个工作示例！

ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
form: FormGroup;

constructor(private fb: FormBuilder) {
this.form = this.fb.group({
person: this.fb.array([])
});
this.addRows()
}
addRows() {
let ctrl = <FormArray>this.form.controls.person;
ctrl.push(this.fb.group({
'name': ['', Validators.required],
'info': ['', Validators.required]
}))
}
}

html

<label class="label">Form array example with validation</label>
<form [formGroup]="form">
<div formArrayName="person">
<div
*ngFor="let p of form.controls.person.controls; let i = index"
[formGroupName]="i"
>
<label for="name">name:</label>
<input
[ngClass]="{ error: !p.controls.name.valid && p.controls.name.dirty }"
formControlName="name"
id="name"
type="text"
/>
<p *ngIf="p.controls.name.errors?.required">Field is required!</p>
<label for="name">info:</label>
<input
[ngClass]="{ error: !p.controls.info.valid && p.controls.info.dirty }"
formControlName="info"
id="name"
type="text"
/>
<input style="margin-top: 10px" type="submit" [disabled]="!form.valid" />
<input
style="margin-top: 10px"
type="button"
value="add Row"
(click)="addRows()"
/>
<p *ngIf="p.controls.info.errors?.required">Field is required!</p>
</div>
</div>
<pre>{{ form.value | json }}</pre>
</form>

堆叠式