Отключение элемента управления Select Form в Reactive Forms/Angular 4+

Question

Я пытаюсь отключить элемент управления выбора формы в моей реактивной форме. Есть ли какие-либо проблемы с этим в настоящее время? Я искал ответ, но не могу получить прямой ответ. Код, который я использую, работает нормально, если это обычный элемент управления вводом, но не для выбора элемента управления.

<select id="locationScanType" class="form-control" formControlName="locationScanType">                     
  <option value="0">-- Select One --</option>
  <option value="FACILITY">Facility</option>
  <option value="CUSTOMER_LOCATION">Customer Location</option>
  <option value="MY_LOCATION">My Location</option>
</select>

<input type="text" class="form-control" formControlName="textInput" /> 

В моем ngOnInit() Функция я делаю это:

this.stopForm = this._formBuilder.group({
  locationScanType: { value: this.stop.locationScanType, disabled: true }, // Hard code true for demo
  textInput: { value: 'Text Input', disabled: true }
});

disabled Атрибут работает для ввода текста, но не для выбора ввода. Он выбирает правильное значение для выбранного входа, но не отключает его. Я что-то упускаю из виду?

Я могу отключить выбор входа с помощью [attr.disabled] и / или [ngClass] атрибуты на входе select, но я бы лучше сделал это в конструкторе форм; не говоря уже об этом, Angular выдает предупреждение в консоль моего браузера.

typescript: 2.4.2

@angular/core: 5.1.3

@angular/forms: 5.2.0

Answer 1

Вы можете использовать функцию отключения, которая предоставляет класс FormControl. как только вы создали форму, вы можете вызвать эту функцию в специальном элементе управления формы

this.stopForm = this._formBuilder.group({
  locationScanType: { value: this.stop.locationScanType }, // Hard code true for demo
  textInput: { value: 'Text Input', disabled: true }
});

this.stopForm.get("locationScanType").disable()