Angular 5 с использованием FormGroup внутри пользовательского FormControl

Я пытаюсь создать пользовательский FormControl, используя ControlValueAccessor интерфейс. Моя цель - вернуть объект, как показано ниже, из пользовательского 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 чтобы справиться с этим.

0 ответов

Другие вопросы по тегам