I am currently facing an issue with disabling a select form control in my reactive form. I have searched for a solution, but haven't found a straightforward answer yet. The code I am using seems to work fine for regular input controls, but not for select controls.
<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" />
When initializing the form in my ngOnInit() function, I set the disable property to true:
this.stopForm = this._formBuilder.group({
locationScanType: { value: this.stop.locationScanType, disabled: true }, // Hard code true for demo
textInput: { value: 'Text Input', disabled: true }
});
Although the disabled attribute works for the text input, it doesn't seem to work for the select input. Even though the correct value is selected for the select input, it remains enabled. Am I overlooking something obvious?
To work around this issue, I can disable the select input using the [attr.disabled] and/or [ngClass] attributes directly on the select input. However, I prefer to handle this within the form builder to avoid Angular console warnings.
typescript: 2.4.2
@angular/core: 5.1.3
@angular/forms: 5.2.0