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>

Answer 1

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