Angular - dynamically disable input with getter on Reactive Forms?

Question

I have the following control on my Angular reactive form:

name: this.name = this.fb.control({ value: '', disabled: this.isNameDisabled }, this.nameValidations )

isNameDisabled is a getter as following:

private get isNameDisabled(): boolean {
    return this.isDisabled;
}

The first load works correctly, but when updating this.isDisabled to True, disabled property is not updated to true, and the input is still enabled.

Is there any way to dynamically disable the input without using this.name.disable()?

> Is there any way to dynamically disable the input without using this.name.disable()? No. — MoxxiManagarm
– MoxxiManagarm, Commented Dec 5, 2022 at 9:30

Lucas Fonseca · Accepted Answer · 2022-12-05 09:33:36Z

1

In this case name: this.name = this.fb.control({ value: '', disabled: this.isNameDisabled }, this.nameValidations ) will work only to initial behavior, if you change the value of this.isNameDisabled will no reflect to the control.

To what you need the best approach is this.form.controls['name'].disable();

answered Dec 5, 2022 at 9:33

Lucas Fonseca

3763 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edmunds Folkmanis Over a year ago

Without form.controls['name'], just this.name.disable() to disable and this.name.enable() to enable.

Pierre-Henri Sudre · Accepted Answer · 2022-12-05 09:44:19Z

0

what is the problem with calling this.name.disable() ?

You could use a directive:

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[customDisable]'
})
export class CustomDisableDirective {

  @Input() set customDisable( isDisabled: boolean ) {
    const action = isDisabled ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

Then use it inside your HTML:

<input [formControl]="formControl" [customDisable]="isNameDisabled()">

answered Dec 5, 2022 at 9:44

Pierre-Henri Sudre

7415 silver badges10 bronze badges

2 Comments

Jovana Over a year ago

You should not call methods from template

Pierre-Henri Sudre Over a year ago

We should not call methods from template because it is called every time Angular change detection runs. It could be an issue if the function is time consuming. Here we are talking about a boolean then it is ok.

Jovana · Accepted Answer · 2022-12-05 14:30:57Z

0

You can also do it in template by assigning a variable to a disabled attribute. In that case you'd have a method which sets disabled variable like so:

isNameDisabled = false;

ngOnInit(){
  this.setNameDisabled();
}

setNameDisabled() {
  // this is just an example, you should replace it with any logic that you have
  this.isNameDisabled = true;
}

And template should look as following:

<input [formControl]="formControl" [attr.disabled]="isNameDisabled">

edited Dec 5, 2022 at 14:30

answered Dec 5, 2022 at 9:52

Jovana

6081 gold badge6 silver badges21 bronze badges

2 Comments

Pierre-Henri Sudre Over a year ago

If you use [disabled] attribute and reactive form you will get this warning message: "It looks like you're using the disabled attribute with a reactive form directive ...". The CustomDisableDirective above will not rise any warning / error.

Jovana Over a year ago

In that case you can use [attr.disabled] instead of [disabled] to solve the problem. Btw this is the most simple solution, I agree that custom directive might be better option, of course, dependent of use case

Collectives™ on Stack Overflow

Angular - dynamically disable input with getter on Reactive Forms?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related