CODEWITHSUNDEEP
angularangular2-forms
franco
franco

Reputation: 697

Angular2 Reactive Forms - Disable form control dynamically from condition

I have a select control that I want to disable dynamically based on a condition:

this.activityForm = this.formBuilder.group({
  docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required]
});

However, docType doesn't become enabled even though at some point this.activeCategory becomes 'document'.

How do I fix this?

Upvotes: 25

Views: 87692

Answers (5)

RocketKittens
RocketKittens

Reputation: 459

this.activityForm.controls['docType'].disable();

Upvotes: 1

kuldeeps1ngh
kuldeeps1ngh

Reputation: 57

you can use ternary operator here to disable form control conditionally.

this.activityForm = this.formBuilder.group({
docType: [{ value: '2', disabled: this.activeCategory != 'document' ? true : false }, Validators.required]
});

Upvotes: -3

Pedro Herrero
Pedro Herrero

Reputation: 11

from .ts file you can add keys to yours from controls, and there you add the item disabled:true (desactivate form item) or false (activate form item)

.ts

public form_name=new FormGroup({

              series: new FormControl({value: '', disabled: true}),
              inten: new FormControl({value: '', disabled: true}),
              rep: new FormControl({value: '', disabled: true}),
              rest: new FormControl({value: '', disabled: false}),
              observation: new FormControl({value: '', disabled: false}),



  });

.html

<form  [formGroup]="form_name" >

                                          <label for="series"  >Series</label>
                                           <input type="text" formControlName="series" >

                                          <label for="inten"  >Inten</label>
                                           <input type="text" formControlName="inten" >

                                          <label for="rep"  >Rep</label>
                                           <input type="text" formControlName="rep" >

                                           <label for="rest"  >rest</label>
                                            <textarea formControlName="rest" rows="3" cols="30" ></textarea>


                    </form>

Upvotes: 1

R. Richards
R. Richards

Reputation: 25161

You have to handle select elements differently than you do other HTML elements. You will have to perform a reset when this.activeCategory changes.

Something like this:

this.activityForm.controls['docType'].reset({ value: '2', disabled: false });

Of course, you will probably want to use the current value, rather than a hard coded '2'.

Same sort of thing to disable it, if that need arises (and it probably will).

this.activityForm.controls['docType'].reset({ value: '2', disabled: true });

More information on ng form control reset.

Upvotes: 10

developer033
developer033

Reputation: 24894

Since I don't know how you're manipulating activeCategory (maybe it's also a FormControl?), I'll suggest the following approach:

You can use (change) to detect when this.activeCategory has changed, as below:

1 - If you're using ngModel:

<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)">

2 - If it's a FormControl:

<input type="text" formControlName="activeCategory" (change)="checkValue($event)">

So, in component, you can manipulate the docType control using disable/enable methods:

checkValue(event: Event) {
  const ctrl = this.activityForm.get('docType');

  if (event.value === 'document') {
    ctrl.enable();
  } else {
    ctrl.disable();
  }
}

Upvotes: 47

Related Questions