Question

我正在尝试使用ControlValueAccessor界面创建自定义FormControl。我的目标是从父表单的自定义FormControl中获取如下所示的对象（示例）：

{
  prop1: int,
  prop2: string,
  prop3: { prop31: int, prop32: string, prop33: int }
}

我的自定义表单控件（为简洁起见，省略了装饰器）：

export class MyCustomControlComponent implements OnInit, ControlValueAccessor {

    private _value: any
    form: FormGroup

    set value(value: any) {
        this._value = value
        this.notifyValueChange()
    }

    get value() { return this._value }

    onChange: (value) => {}
    onTouched: () => {}

    constructor(
        public fb: FormBuilder,
    ) {
        this.form = this.fb.group({
            prop1: [null, Validators.compose([Validators.required, Validators.min(0)])],
            prop2: [null, Validators.required],
            prop3: this.fb.group({
                prop31: [null, Validators.required],
                prop32: [null, Validators.required],
                prop33: [null, Validators.required],
            }),
        })
    }

    setValues() {
        const formValues = this.form.value
        this.writeValue(formValues)
    }

    notifyValueChange() {
        if (this.onChange) {
            this.onChange(this.value)
        }
    }

    ngOnInit(): void {
        this.form.valueChanges.subscribe(_ => this.setValues())
    }

    writeValue(obj: any): void { this.value = obj }
    registerOnChange(fn: any): void { this.onChange = fn }
    registerOnTouched(fn: any): void { this.onTouched = fn }
    setDisabledState(isDisabled: boolean): void { }
}

父母表格：

childForm: FormControl
constructor(...) {
  childForm = new FormControl()
}
ngOnInit() {
  this.childForm.valueChanges.subscribe(value => console.log(value))
}

使用父窗体中的这个，我从自定义窗体控件中获取值。但是，一旦我尝试从父表单中设置一些初始值，它们就不会出现在自定义表单中。我的理解是，我需要在自定义控件的内部FormGroup中映射从父级收到的对象，但是我不确定在哪里以及如何进行。帮助将不胜感激。同样，欢迎对此提出更好的方法（如果有）的意见。

编辑

要回答为什么要尝试做到这一点：我有一个很大的窗体，并且上面给出的此示例对象所涉及的部分实际上是动态的-这意味着我需要在最后存储此类对象的数组。为了消除混乱，我试图将这一部分移动到单个表单控件中，以便可以使用FormArray来处理此问题。

在自定义FormControl中使用FormGroup的Angular 5

0 个答案: