Angular2 Реактивные формы - динамически отключить управление формой из условия

У меня есть элемент управления select, который я хочу отключить динамически на основе условия:

this.activityForm = this.formBuilder.group({
  docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required]
});

Однако docType не включается, хотя в какой-то момент this.activeCategory становится "документом".

Как это исправить?

Ответы

Ответ 1

Так как я не знаю, как вы манипулируете activeCategory (возможно, это также FormControl?), я предлагаю следующий подход:

Вы можете использовать (change) для обнаружения, когда this.activeCategory изменилось, как показано ниже:

1 - Если вы используете ngModel:

<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)">

2 - Если это a FormControl:

<input type="text" formControlName="activeCategory" (change)="checkValue($event)">

Итак, в компоненте вы можете управлять элементом управления docType с помощью методов disable/enable:

checkValue(event: Event) {
  const ctrl = this.activityForm.get('docType');

  if (event.value === 'document') {
    ctrl.enable();
  } else {
    ctrl.disable();
  }
}

Ответ 2

Вы должны обрабатывать выбранные элементы иначе, чем другие HTML-элементы. Вам придется выполнить сброс при изменении this.activeCategory.

Примерно так:

this.activityForm.controls['docType'].reset({ value: '2', disabled: false });

Конечно, вы, вероятно, захотите использовать текущее значение, а не жестко закодированное '2'.

То же самое можно отключить, если возникнет такая необходимость (и, вероятно, она возникнет).

this.activityForm.controls['docType'].reset({ value: '2', disabled: true });

Более подробная информация о сбросе управления формой reset.

Ответ 3

this.activityForm.controls [ 'Doctype'] отключить().;