angular2 will not disable input based on true or false condition

Question

I have a input box based on the below:

If a change a radio I see that the value changes to true for false:

<pre> {{model_parameters_general.estimationmethod=='ew'}} </pre>

So wow why will the input box be disabled based on true for false?

<input [disabled]="model_parameters_general.estimationmethod=='ew'" [(ngModel)]="model_parameters_general.lambda" 
                           formControlName="lambda" type="text" class="form-control">

EDIT:

In the logs I get this:

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)
  });

So I am using a reactive from in rc6.

I set the initial disable to the below:

this.myForm = fb.group({
                lambda: new FormControl({value: .99, disabled: true}, Validators.required),

        })

So do I enable based on a toggle of a radio input?

if you use the tag form you should add attribute name for your input as well — Dmitry Grinko, Nov 07 '17 at 21:14

score 9 · Answer 1 · answered Nov 07 '17 at 21:09

9

Try using attr.disabled, instead of disabled

<input [attr.disabled]="disabled?'':null"/>

StackOverflow Answer

answered Nov 07 '17 at 21:09

Pankaj Avhad

344
2
3

score 8 · Answer 2 · answered Sep 05 '16 at 07:01

8

For boolean properties you need to set them to null to get them removed

<input [disabled]="model_parameters_general.estimationmethod=='ew' ? true : null" [(ngModel)]="model_parameters_general.lambda" 
  formControlName="lambda" type="text" class="form-control">

answered Sep 05 '16 at 07:01

Günter Zöchbauer

623,577
216
2,003
1,567

1

I don't understand the last sentence of your question. Perhaps a missing "how" or something? – Günter Zöchbauer Sep 05 '16 at 07:40
In the form html [disable] does not work. by default its always enabled. The only way I could disable is to disable in the formControl. Now I need to monitor events which I guess is this.myForm.valueChanges subscribe – Tampa Sep 05 '16 at 07:46
For what purpose do you want to monitor events? – Günter Zöchbauer Sep 05 '16 at 07:49
Because in a reactive form I cant disable or enable an input field based on the log message from angular2 posted in my question – Tampa Sep 05 '16 at 07:58

andyrue · Answer 3 · 2016-09-07T20:34:31.597

4

It seems in rc.6 they have removed the ability to disable inputs dynamically on a template binding when using reactive forms. You have to monitor changes and call .disable() on the formControl you wish to disable now. I rather prefer the old way of doing things and hope that they bring it back or an equally useful solution.

Chime in on this related github issue.

edited Sep 07 '16 at 20:34

answered Sep 07 '16 at 20:05

andyrue

903
10
24

score 4 · Answer 4 · answered Feb 15 '17 at 13:05

Try following code.

setControl(name: any, Isenable: boolean): void {
    let ctrl = this.checkInForm.controls[name];
    console.log(ctrl);
    Isenable ? ctrl.enable() : ctrl.disable();
}

Calling Statement

this.setControl('ctrl name', true);    // enbale it
  this.setControl('ctrl name', false);    // disable it

Thanks Happy Coding!

angular2 will not disable input based on true or false condition

4 Answers4

Linked