Angular 7 Dynamic Creating表格，带有ngFor和ngModel，带有验证（或ngFrom）

Question

我正在尝试在Angular中创建一个类似输入表单的表。

我目前的解决方案是这样的：

HTML：

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

TS：

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

doSomething(){
};

但是，如果我这样做，“必需的”验证器在单击“提交”按钮时不起作用。

我尝试了几种方法：

1. 而不是设置[ngModelOptions] =“{standalone：true}” ，我尝试了name ='person：{{$ index}}' 。 不行。

2. 尝试设置ngForm而不是使用ngModel ，使用formControlName 。 我无法弄清楚如何动态创建formControlName并验证它们。

请问是否有办法正确完成这项工作？

谢谢！

Answer 1

您最好的选择是使用Angular ReactiveFormsModule。 ReactiveFormsModule支持FormArray，可以轻松执行验证并获取表单项值。

供参考，请查看：

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