forms - Angular 2 中带有 FormArray 的 ControlValueAccessor

Question

我有一个处理输入控件数组的子组件。我想对子组件进行表单控制。

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

这是初始代码

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

目的是将父表单与子组件中的输入控件数组绑定(bind)。如果子组件中的输入控件之一没有必填字段，表单也会变得无效。

http://plnkr.co/edit/HznCJfSEiSV28ERqNiWr?p=preview

Answer 1

我喜欢解决旧帖子 :)

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

@Component({
    selector: "my-child",
    template: `
    <h1>Child</h1>

    <div *ngFor="let group of formArray.controls" [formGroup]="group">
        <input formControlName="firstName" (blur)="_onTouched()" />
        <input formControlName="lastName" (blur)="_onTouched()"/>
    </div>
    `,
    providers: [{
            provide: NG_VALUE_ACCESSOR,
            useExisting: Child,
            multi: true
        },
        {
            provide: NG_VALIDATORS,
            useExisting: Child,
            multi: true
        }
    ]
})
export class Child implements ControlValueAccessor {
    formArray: FormArray;
    _onChange;
    _onTouched;

    writeValue(value: any) {
        this.formArray = new FormArray(
            value.map(x => {
                return new FormGroup({
                    firstName: new FormControl(x.firstName, Validators.required),
                    lastName: new FormControl(x.firstName, Validators.required)
                });
            })
        );
        this.formArray.valueChanges.subscribe(res => {
            this._onChange(res);
        });
    }

    registerOnChange(fn: (value: any) => void) {
        this._onChange = fn;
    }

    registerOnTouched(fn: (value: any) => void) {
        this._onTouched = fn;
    }

    validate({ value }: FormControl) {
        return !this.formArray || this.formArray.valid ?
            null : { error: "Some fields are not fullfilled" };
    }
}