Forms 角度为2的FormArray的ControlValueAccessor

我有一个子组件，它处理输入控件数组。我想对子组件使用formcontrol

我正在传递json对象的数组，将父表单绑定到子组件的FormArray的正确方法是什么？首先需要2个表单控件和验证器

这是初始代码

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

Child

目的是将父窗体与子组件中的输入控件数组绑定。此外，若子组件中的一个输入控件并没有必填字段，则表单将变得无效

---

您必须使用

formarayName

指令和

*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>

欲知详情,

案例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参数传递，则不能

我喜欢解决旧帖子：）

关键是您的自定义表单组件在FormArray中具有，然后使用“writeValue”创建FormArray，请参见

@组件({
选择器：“我的孩子”，
模板：`
小孩
`,
供应商：[{
提供：NG_值访问器，
用途：儿童，
多：真的
},
{
提供：NG_验证器，
用途：儿童，
多：真的
}
]
})
导出类子实现ControlValueAccessor{
格式：格式；
_一旦改变；
_未触及的；
writeValue（值：任意）{
this.formArray=新formArray(
value.map（x=>{
返回新表单组({
firstName:newformcontrol（x.firstName，Validators.required），
lastName:newformcontrol（x.firstName，Validators.required）
});
})
);
this.formArray.valueChanges.subscribe（res=>{
这一变化（res）；
});
}
registerOnChange（fn:（值：any）=>void）{
这个。_onChange=fn；
}
寄存器（fn:（值：any）=>void）{
这个。_ontoched=fn；
}
验证（{value}:FormControl）{
返回！this.formArray | | this.formArray.有效吗？
null:{错误：“某些字段未完全填充”}；
}
}

您能否澄清将username表单控件设置为json对象的目的？您是否试图在子组件中列出json中每个firstname-lastname对的名字和姓氏？是的，对于给定的json，我试图在输入控件中呈现每一对。@AnonymousMe，你找到这个问题的解决方案了吗？使用ngx子表单很容易做到这一点。当formArray在父组件本身中创建时，这很好，但我希望有一个带有formArray的子组件。你的想法是错误的和反模式的。问题是：为什么要将FormGroup嵌入到新组件中？这不是一个好办法。但是，如果你坚持这样做，你可以创建一个组件来获取一个FormGroup并在里面使用它。这怎么可能是一个反模式的组件，子组件将必须驻留在一个库中，并且将被许多页面使用。与其到处复制粘贴代码，不如制作一个子组件并像在许多地方一样使用它。您只能将一个参数传递给ngModel，不能在一个参数中转换两个参数。这个组件永远不会与ngModel一起工作，无论是你的应用程序还是它本身。

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')
                  }),
                ])
   })