10
votes

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?

4
if you use the tag form you should add attribute name for your input as well - Dmitry Grinko

4 Answers

9
votes

Try using attr.disabled, instead of disabled

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

StackOverflow Answer

8
votes

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
votes

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
votes

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!