在反应性表单/ Angular 4+中禁用选择表单控件

Question

I am trying to disable a select form control in my reactive form. Is there any issues with this currently? I have been looking around for an answer but I am unable to get a straight answer. The code I am using works fine if it is a regular input control, but not for a select control.

<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" /> 

In my ngOnInit() function I do this:

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

The disabled attribute works for the text input, but doesn't for the select input. It does select the correct value for the select input, but doesn't disable it. Am I missing something obvious?

I can disable the select input by using the [attr.disabled] and/or [ngClass] attributes on the select input, but I'd rather do it in the form builder; not to mention if I don't, Angular throws a warning into my browser's console.

typescript: 2.4.2

@angular/core: 5.1.3

@angular/forms: 5.2.0

Answer 1

you can use the disable function that provide the FormControl class. once you have the form created you can call this function in the specific form control

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()