我试图在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(){
};
但是,如果我采用这种方式,则单击“提交”按钮后,“必填”验证程序将无效。
我尝试了几种方法:
而不是设置 [ngModelOptions] =“ {standalone:true}” ,而是尝试了 name ='person:{{$ index}}'。不起作用。
试图设置 ngForm ,而不是使用 ngModel ,而是使用 formControlName 。我不知道如何动态创建 formControlName 并对其进行验证。
我可以问一下是否有办法正确地完成这项工作吗?
谢谢!
答案 0 :(得分:0)
您最好的选择是使用Angular ReactiveFormsModule。 ReactiveFormsModule支持FormArray,将使执行验证和获取表单项值变得容易。
供参考,请查看: