Question

我有一个带有formArray的表单

let myForm=formBuilder.group({
   "firstName":[],
   "subjects":formBuilder.array([])
})

//添加新控件： -

(<FormArray>self.myForm.controls['subjects']).push(new FormControl());

//对于渲染表格： -

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index">
     <input formControlName="{{i}}"
<div>

当我提交表单时，我得到的值为： { “名字”： “ABC”， “受试者”：[ “一”， “B”] }

我可以在FormArray中创建FormControl，以便我可以获取主题对象吗？

Answer 1

表单的值类似于使用FormGroups，FormArrays和FormControls创建的对象结构。所以，如果你想让你的主题成为一个对象，你必须确保你绑定你的主题＆＃39;到表单组，然后为该主题的每个属性设置表单控件。形式组。

例如，如果您希望主题看起来像：{ a: 'some value', b: 'some other value }，那么：

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index">
     <div [formGroup]="control">
         <input formControlName="a" />
         <input formControlName="b"
     </div>
<div>

这当然意味着当您将新控件推送到主题FormControlArray时，您必须确保添加相同的FormGroup结构，而不是单个FormControl

修改

由于您的主题是动态对象，意味着您不知道属性是什么，因此您无法使用formControlName =＆＃34; a＆＃34;因为在那个例子中，＆＃39; a＆＃39;是一个固定的字符串。

但是，您可以绑定到变量，因此您可以执行以下操作：

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index"> <div [formGroup]="control"> <input [formControlName]="firstProperty" /> <input [formControlName]="secondProperty" </div> <div>

其中firstProperty和secondProperty是包含字符串的组件中的成员变量。然后，如果firstProperty = "x"和secondProperty="y"，您最终会得到{ x: 'input value', y: 'other input value' }的主题。

使用该功能，您可以获得创意并将不同的属性名称存储在数组中，例如您可以索引。这样，您就可以获得动态对象。

例如

在您的组件中，

subjectFields = [ { prop1: 'math', prop2: 'science' }, { prop1: 'bio', prop2: 'chem' }, .... ]

然后是您的模板，

<div *ngFor="let control in myForm.controls['subjects'].controls;let i=index"> <div [formGroup]="control"> <input [formControlName]="subjectFields[i].prop1" /> <input formControlName="subjectFields[i].prop1" /> ...... </div> <div>

您最终的第一个主题为{ math: 'input val', science: 'input val 2' }，第二个主题为{ bio: 'input val', chem: 'input val' }等。

FormControl在FormArray中具有属性Names

1 个答案: