Angular 4: Disabling nested form validators

Question

I want to disable the "addressLine1" validator; how can i disable it? seeing at it is nested inside of "address" element

 this.form = fb.group({           
            'region': [null, Validators.required],

            'address': fb.group({               
                'addressLine1': ["", Validators.required],
                'addressLine2': [""],
                'city': ["", Validators.required]             
            }),

        })

I tried this below but it did not work

 this.form.controls["address"]["addressLine1"] .disable();

Thank you

Here is the html:

<form [formGroup]="form">

<div ><label><span class="required">*</span>State/Province/Region<br><input class="form-control" pInputText formControlName="addressLine1" [(ngModel)]="selected.address.addressLine1" required></label></div>

</form>

yurzui · Accepted Answer · 2017-11-04 05:03:58Z

5

The correct syntax should be:

(this.form.controls["address"] as FormGroup).controls["addressLine1"].disable({});

or even better

this.form.get('address.addressLine1').disable();

Stackblitz example

Update

To disable validator use the following code:

const control = this.form.get('address.addressLine1');
control.setValidators(null);
control.updateValueAndValidity();

Stackblitz Example

edited Nov 4, 2017 at 5:03

answered Nov 4, 2017 at 4:29

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BadGuyKUTA Over a year ago

they disabled the whole field instead of just disabling the validator checks

yurzui Over a year ago

What do you expect when calling disable method?

BadGuyKUTA Over a year ago

i want it to just disable the validator for that field so i can save the form without having input in that field

P.S. · Accepted Answer · 2017-11-04 03:08:27Z

1

We need to pass parameters to disable method as docs says us:

So if you don't need to pass any parameters, just pass an empty object, and the code should look like this:

this.form.controls["address"]["addressLine1"].disable({});

edited Nov 4, 2017 at 3:08

answered Nov 4, 2017 at 1:50

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

8 Comments

P.S. Over a year ago

@BadGuyKUTA, didn't you forget to add [formGroup]="form" to your form element and formControlName="addressLine1" (the example for addressLine1 control) on your inputs?

BadGuyKUTA Over a year ago

i just edited original post and added the html it has formControlName as that already

P.S. Over a year ago

@BadGuyKUTA, and form tag looks like this: <form [formGroup]="form">?

BadGuyKUTA Over a year ago

Correct <form [formGroup]="form">; i think my error is how i am referencing it somewhere here this.form.controls["address"]["addressLine1"] .disable();

P.S. Over a year ago

@BadGuyKUTA, I just tried in my project, it should be this.form.controls["address"]["addressLine1"].disable({});, we should pass a parameter to disable method. Try that, it should do the trick

|

Collectives™ on Stack Overflow

Angular 4: Disabling nested form validators

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related