用ngFor和ngModel（或ngFrom）动态创建表单

Question

<form (ngSubmit)="doSomething()">
<table>
    <thead>
        <tr>First Name</tr>
        <tr>Last Name</tr>
        <tr>Phone Number</tr>
    </thead>
    <tbody>
        <tr *ngFor="let person of team"></tr>
        <td><input type="text" [(ngModel)]="person.first_name" [ngModelOptions]="{standalone: true}" required></td>
        <td><input type="text" [(ngModel)]="person.last_name" [ngModelOptions]="{standalone: true}" required></td>
        <td><input type="text" [(ngModel)]="person.phone" [ngModelOptions]="{standalone: true}" required></td>
    </tbody>
</table>
<button (click)="addNewEntry()"></button>
<button type="submit">Submit</button>

team : new Array()
addNewEntry(){
    this.team.push({
        'first_name':'',
        'last_name':'',
        'phone':null})
}

doSomething(){
};

但是，如果我这样做，'Required'验证器在单击Submit按钮时不起作用。

我试过几种方法：

>

没有设置[ngModelOptions]=“{standalone:true}”，而是尝试了name='person：{{$index}}‘。不起作用。

Answer 1

您的最佳选择是使用Angular ReactiveFormsModule。ReactiveFormsModule支持FormArray，并将使执行验证和获取表单项值变得容易。

请参阅：

1. https://angular.io/guide/reactive-forms
2. https://stackoverflow.com/a/48527939/9194488