11

I have an Angular 4.10 application that is using the Kendo Angular Grid control. I am using External Editing. I have created the FormGroup as 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 field BlindName based on the value IsFromBsp. 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

LanceM
  • 1,888
  • 4
  • 23
  • 41

2 Answers2

12

I assume you want to disable input field if IsFromBsp is true. If this is needed only initially, you can run a function after building the form:

check() {
  if(this.editForm.get('IsFromBsp').value) {
    this.editForm.get('BlindName').disable()
  }
}

If this value changes, you have to call this function again on some change event, either with (change) or then use valueChanges to watch for changes in the form values, where if the value is something else than true you can do this.editForm.get('BlindName').enable() to enable it again. This works with "regular" reactive form, hopefully also with Kendo.

AT82
  • 71,416
  • 24
  • 140
  • 167
  • Thanks for your answer, it basically got me to the solution. I am hooking into the OnChanges Lifecycle hook and doing the following: ngOnChanges(changes: any) { if (changes && changes.model && changes.model.currentValue) { if (changes.model.currentValue.IsFromBsp) { this.editForm.get('BlindName').disable(); } else { this.editForm.get('BlindName').enable(); } } } – LanceM May 31 '17 at 19:58
  • Yeah, not really knowing what was going on, mainly if changes could be happening during editing form or not. As said you can have a change event, but also tap into the valueChanges... like: `this.editForm.get('IsFromBsp').valueChanges.subscribe(changedData => {.... either disable or enable 'BlindName'...})` But do what feels best for your use case! Have a good one and happy coding! :) – AT82 May 31 '17 at 20:37
0

I don't know how this kendo work but in html you can do something like this:

 <input type="text" [disabled]="form.controls['IsFromBsp']==='' && form.controls['IsFromBsp'].touched" formControlName="something">
Eduardo Vargas
  • 8,752
  • 2
  • 20
  • 27
  • 1
    Hi Eduardo, Thanks for your suggestion but unfortunately it didn't work and I get the warning: "It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors. Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) })" – LanceM May 31 '17 at 17:56
  • I see maybe you can try to detect changes on the form and conditionally call the this.myForm.controls['id'].disable() or enable() methods then. – Eduardo Vargas May 31 '17 at 18:27
  • @ AJT_82: you can make it working using [attr.disabled] as also written here: https://github.com/angular/angular/issues/11271#issuecomment-244507976, however I do not find this approach correct with reactive forms, plus it will generate a warning as suggestion to avoid this approach to prevent 'changed after checked' errors. – Francesco Oct 10 '17 at 07:43