问题描述:[formarray][SubmitForm][Angular]无法从form数组提交值
回答: 在Angular中,FormArray是一个用于管理动态表单控件的类。它允许我们在表单中动态添加、删除和更新表单控件。当我们使用FormArray时,有时可能会遇到无法从FormArray提交值的问题。
解决这个问题的方法是确保在提交表单之前,将FormArray中的值正确地提取出来并进行处理。以下是解决该问题的步骤:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div formArrayName="myArray">
<div *ngFor="let control of myForm.get('myArray').controls; let i = index">
<input [formControlName]="i" />
</div>
</div>
<button type="submit">Submit</button>
</form>
`,
})
export class MyFormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
myArray: new FormArray([]),
});
}
onSubmit() {
// 提交表单时处理FormArray中的值
const values = this.myForm.value.myArray;
console.log(values);
// 执行其他操作,如发送到服务器等
}
}
formArrayName
指令将FormArray与表单控件关联起来,并使用*ngFor
指令循环遍历FormArray中的控件。onSubmit
方法中,通过this.myForm.value.myArray
获取FormArray中的值,并进行后续处理。在这个例子中,我们只是简单地将值打印到控制台上,你可以根据实际需求进行其他操作,比如将值发送到服务器。推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行。
领取专属 10元无门槛券
手把手带您无忧上云