Как создать отключенную форму с дочерними компонентами?
На всю жизнь мне кажется, что я должен иметь возможность создать отключенный FormArray. Я пытаюсь создать родительскую форму только для просмотра (FormArray) с 1-n подмассивами (также FormArray). Я передаю подмассивы дочерним компонентам для инициализации их элементов управления (FormControl).
Я пробовал звонить disable()
в родительской форме с разными опциями и разными хуками жизненного цикла он выдает это исключение:
Выражение изменилось после того, как оно было проверено. Предыдущее значение: "true". Текущее значение: "ложь".
Вот пара примеров того, что я пробовал:
- в
ngOnInit
, как создать, так и отключить форму -> не отключить, выдает исключение - в
ngOnInit
создать форму, вngAfterViewInit
отключить форму -> ДЕЛАЕТ отключить, но выдает исключение
Более старая версия форм принимала объект параметров, и (к сожалению) это больше не работает, но выглядело бы так: new FormArray({ value: myControlsArray, disabled: true })
,
Я создал PLNKR для моделирования иерархии и формы компонента.
Кто-нибудь знает, как инициализировать отключенную форму?
Изменить (ответ): я упустил важную часть информации и ключ к решению. В моем случае использования я беру сохраненное значение формы и инициализирую новую форму только для чтения. Вместо того, чтобы передавать сохраненное значение формы в дочерний компонент, я должен был создать родительскую форму, ее подформы и элементы управления.
2 ответа
Как отмечено в редактировании, я использую сохраненное значение формы для инициализации новой формы только для чтения. Вместо того, чтобы передать значение дочернему компоненту для инициализации его элементов управления, я решил эту проблему в значительной степени, создав элементы управления одновременно с родительской формой и вложенными формами. Поступая так, я мог отключить родительскую форму в ngOnInit
без отключения обнаружения изменений и по-прежнему передавать подчиненные формы дочерним компонентам. Вот выдержка из того, как это выглядело, и рабочий пример:
app.component.ts:
public questions: Array<string[]> = MULTIPLE_RADIOS;
public responses: Array<string[]> = MULTIPLE_RESPONSES;
constructor(private _fb: FormBuilder) {}
ngOnInit() {
this.form = this._fb.array([]);
for (let response of this.responses) {
const questionForm = this._fb.array([]);
for (let responseControl of response) {
questionForm.push(this._fb.control(responseControl));
}
this.form.push(questionForm);
}
this.form.disable({ emitEvent: false });
}
приложение-radio.component.ts:
@Input()
public form: FormArray;
@Input()
public radios: string[];
constructor(private _fb: FormBuilder) {}
ngOnChanges() {
// same component used to create a live form
// in this case, its parent (app-question.component) gives
// it an empty form, and the child adds the control it needs
if (this.form.length === 0) {
this.form.push(this._fb.control(''));
}
}
Вы не можете создать инвалидов form
, Но вы можете создать отключить набор input
(fieldset
), которая оказывается такой же, если ваша группа такая же большая, как форма.
<fieldset [disabled]=[true]>
<input type="text" ...>
<input ...>
</fieldset>