forms - Angular 2中带有FormArray的ControlValueAccessor

我有一个处理输入控件数组的子组件。我想要一个窗体控件来控制子组件。
我正在传递json对象的数组，这是将父窗体绑定到子组件的form array的正确方法，该formarray具有2个表单控件，并且首先需要验证器。
这是初始代码

<h1>Child</h1>
<div formArrayName="names">
 <div *ngFor="let c of names.control">
  <input formControlName="firstName">
  <input formControlName="lastName">
 </div>
</div>

目的是将父窗体与子组件中的输入控件数组绑定。如果子组件中的某个输入控件没有必需字段，则窗体也将变为无效。
http://plnkr.co/edit/HznCJfSEiSV28ERqNiWr?p=preview

最佳答案

您必须使用formArrayName指令和*ngFor如下：

<form [formGroup]="form" (ngSubmit)="sayHello()">
       <input formControlName="name"><br>
       <input formControlName="email"><br>
       <div formArrayName="username">
           <div *ngFor="let user of username.controls; let i=index">
                <my-child formControlName="i"></my-child>
           </div>
       </div>
       <button type="submit">Register</button>
</form>

对于FormBuilder你也必须使用FormArray。

form = new FormGroup({
     name: new FormControl('My Name'),
     username: new FormArray([
                  new FormControl("value"),// ControlValueAccesor is applied only to one control, not two. So you cannot use javascript object like you are using below this line.
                  {firstName:"Anna", lastName:"Smith"},
                  {firstName:"Peter", lastName:"Jones"}
                ])
   });

有关详细信息，see this doc.
案例2：通过表单组：

form = new FormGroup({
     name: new FormControl('My Name'),
     username: new FormArray([
                  new FormGroup({
                        firstName: new FormControl('Anna'),
                        lastName: new FormControl('Smith')
                  }),
                  new FormGroup({
                        firstName: new FormControl('Peper'),
                        lastName: new FormControl('Jones')
                  }),
                ])
   })

如果您试图将formgroup作为ngmodel参数传递，则不能！

关于forms - Angular 2中带有FormArray的ControlValueAccessor，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40439660/