CODEWITHSUNDEEP
angular
Shailesh Ladumor
Shailesh Ladumor

Reputation: 7242

disabled not working with formControlName into model-driven form in angular 2?

I am using a model-driven template. I want to disable input if checkbox not checked.but it not working with formControlName. I tried with three way. give here 

 1.disabled="!filterForm.value.customer_limit"
 2.[disabled]="!filterForm.value.customer_limit"
 3.[readonly]="!filterForm.value.customer_limit"

this is my HTML code:

 <md-checkbox [checked]="filterForm.value.customer_limit" formControlName="customer_limit">
                        <md-input-container class="full-width">
                            <input mdInput
                                   formControlName="customer_limit_input"
                                   [disabled]="!filterForm.value.customer_limit"
                                   placeholder="Limit to customers">
    </md-input-container>
    </md-checkbox>

have any idea please help me. thanks

Upvotes: 9

Views: 19050

Answers (4)

Mher
Mher

Reputation: 1263

The best solution I was able to find

<input mdInput
       formControlName="customer_limit_input"
       [attr.disabled]="!filterForm.value.customer_limit ? true : null"
       placeholder="Limit to customers">

Upvotes: 0

Hamed Baatour
Hamed Baatour

Reputation: 6932

In your component make sure you define a boolean variable to hold your input state:

  disabled: boolean = true;

and in your template you toggle it as the following:

<md-checkbox [(ngModel)]="disabled">Toggle Input</md-checkbox>
<input mdInput [disabled]="disabled">

EDIT: for model-driven forms, format your template as the following:

 <md-checkbox [formControl]="checkbox">Toggle Input</md-checkbox>
 <input mdInput [disabled]="disabled">

and in your component, you listen for changes just like this:

disabled: boolean;
ngOnInit(){
   this.checkbox.valueChanges.subscribe(val => this.disabled = val);
}

Upvotes: 1

AVJT82
AVJT82

Reputation: 73357

With reactive forms, [disabled] or disabled do not work. What you can use, is to check whether the checkbox is checked or not and disable or enable the input field.

First of all, I removed the input field from inside the checkbox, wasn't sure why it was placed there.

Then when building a form, I made an if-statement to check the value of customer_input and then disable the input field if it's false:

if this.myForm.get('customer_limit').value === true
  this.myForm.get('customer_limit_input').enable()

IF you though know the boolean value initially of the customer_limit, you can skip the above, and just disable the field initially (if that is the case), like suggested by Shailesh:

customer_limit_input: [{value: 'something', disabled: true}]

I put a change event to watch the status of the checkbox and call a function when changes happen:

<md-checkbox (change)="disableEnableInput(myForm.get('customer_limit').value)" 
  formControlName="customer_limit">
</md-checkbox>
<md-input-container class="full-width">
  <input mdInput formControlName="customer_limit_input">
</md-input-container>

The disableEnableInput() function:

disableEnableInput(bool: boolean) {
  if bool === true
    this.myForm.get('customer_limit_input').enable()
  else
    this.myForm.get('customer_limit_input').disable()
}

I don't know if there is a more elegant solution for this (?) But this is what I have used thus far.

Here's DEMO

Upvotes: 8

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7242

i got solution from here set disabled with formControlName.

form = new FormGroup({
    'first': new FormControl({value: 'hello', disabled: false})
  })

ngOnInit(): void {
        this.filterForm.valueChanges.subscribe(
            (formValue) => {
               console.log(formValue)
            }
        );
    }

Upvotes: 1

Related Questions