Angular 6 can't disable enable input with local reference

Question

I'm using reactive form in my angular application.

measurement: new FormControl(true),
volume: new FormControl(0)

And in my html i'm using like

<input type="checkbox" formControlName='measurement' #measurement>Volume
<input formControlName='volume' type="number" class="form-control input-md" [attr.disabled]="!measurement.checked">

When ever I check 'Volume' check box it should enable 'volume' control. But it is not switching between enable and disable. But if I console 'measurement.checked' it is show true or false. How can I do enable or disable via local reference? Thank you.

Lokeshkumar S · Accepted Answer · 2019-02-25 07:09:28Z

2

Disabled cannot be Set Dynamically like your approach for more info https://github.com/angular/angular/issues/11271 . But you can enable or disable via function in onchange like control.enable() , control.disable()

answered Feb 25, 2019 at 7:09

Lokeshkumar S

2642 silver badges7 bronze badges

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

Comments

Maniraj Murugan · Accepted Answer · 2019-02-25 07:35:16Z

1

You can achieve it through typescript function..

Change the below line in your code,

<input formControlName='volume' type="number" class="form-control input-md" [attr.disabled]="!measurement.checked">

to

<input formControlName='volume' type="number" class="form-control input-md" [attr.disabled]="disableVolume()">

and in your ts file, add the function disableVolume(),

  disableVolume() {
    if(this.form.get('measurement').value === true) {
      this.form.get('volume').enable();
    } else {
      this.form.get('volume').disable();
    }
  }

Working example: https://stackblitz.com/edit/angular-form-array-example-cc27c3

answered Feb 25, 2019 at 7:35

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

Collectives™ on Stack Overflow

Angular 6 can't disable enable input with local reference

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related