在另一个ngFor表中正确编写NgModel表单的方法是使用Angular的双向数据绑定。以下是一些步骤和示例代码来实现这个目标:
public formValues: any[] = [];
<div *ngFor="let item of formValues; let i = index">
<input type="text" [(ngModel)]="formValues[i].value">
</div>
public formValues: { field1: string, field2: string }[] = [];
<div *ngFor="let item of formValues; let i = index">
<input type="text" [(ngModel)]="formValues[i].field1">
<input type="text" [(ngModel)]="formValues[i].field2">
</div>
这样,每个表单项都可以正确地绑定到数据模型中的相应字段。
public addForm(): void {
this.formValues.push({ field1: '', field2: '' });
}
<button (click)="addForm()">Add Form</button>
通过调用addForm()
方法,可以在表单中添加新的输入项。
这样,你就可以在另一个ngFor表中正确编写NgModel表单了。记得在模板中使用适当的验证和样式来增强用户体验,并确保在组件类中处理表单的提交和其他逻辑。关于Angular中表单的更多信息,可以参考Angular官方文档中的表单部分。
领取专属 10元无门槛券
手把手带您无忧上云