Как создать отключенную форму с дочерними компонентами?

На всю жизнь мне кажется, что я должен иметь возможность создать отключенный 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>

См. Есть ли способ отключить набор входов в угловых 2?

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