How can you dynamically disable for Angular reactive form?
I have an Angular 4.10 app using Kendo Angular Grid control. I am using External Editing. I have created a FormGroup as shown below:
this.editForm = new FormGroup({
'Id': new FormControl({ value: 0, disabled: true }),
'Name': new FormControl("", Validators.compose([Validators.required, Validators.maxLength(30)])),
'BlindName': new FormControl({ value: "" }, Validators.compose([Validators.required, Validators.maxLength(30)])),
'UnitText': new FormControl(0),
'IsFromBsp': new FormControl(true),
'Disabled': new FormControl(false),
'SortOrder': new FormControl(0, Validators.compose([Validators.required, Validators.pattern('\\d')]))
});
What I would like to do is set the disabled state for the BlindName field based on the IsFromBsp value. Something like:
'BlindName': new FormControl({ value: "", disabled: this.IsFromBsp }, Validators.compose([Validators.required, Validators.maxLength(30)])),
Is there a way to achieve this? Please let me know. Thanks to
source to share
I assume you want to disable the input field if IsFromBsp
- true
. If you only need it initially, you can run the function after creating the form:
check() {
if(this.editForm.get('IsFromBsp').value == true) {
this.editForm.get('BlindName').disable()
}
}
If this value has changed, you must call this function again in some change event, either with (change)
, or then use valueChanges
to view the changes in the form values, where if the value is nothing else, how true
can you do this.editForm.get('BlindName').enable()
to enable it again. This works with the "regular" reactive form, hopefully Kendo too.
source to share