使用ngFor和ngModel进行验证(或ngFrom)的Angular 7动态创建表单

时间:2019-03-21 18:11:54

标签: angular

我试图在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 并对其进行验证。

我可以问一下是否有办法正确地完成这项工作吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

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

供参考,请查看:

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