10

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?

1
  • if you use the tag form you should add attribute name for your input as well Nov 7, 2017 at 21:14

4 Answers 4

10

Try using attr.disabled, instead of disabled

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

StackOverflow Answer

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">
4
  • 1
    I don't understand the last sentence of your question. Perhaps a missing "how" or something? Sep 5, 2016 at 7: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 5, 2016 at 7:46
  • For what purpose do you want to monitor events? Sep 5, 2016 at 7: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 5, 2016 at 7:58
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.

4

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.