Get nested reactive form value in Angular?

Question

I have a nested form similar to the following:

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    date1: new FormControl(''),
    date2: new FormControl('')
  })
});

I'm trying to set the date2 mindate as date1 value like this:

<mat-form-field class="datepickerformfield" floatLabel="never">
    <input matInput class="dp" formControlName="date2" [min]="profileform.controls['date1'].value" [matDatepicker]="date2" placeholder="DD/MM/AAAA" >
</mat-form-field>

Also tried with:

[min]="profileform.address.controls['date1'].value"

And

[min]="profileform.controls[address].controls['date1'].value"

But I get an error:

Cannot read property 'value' of undefined

How can I get the date1 value with the profileform object?

Answer 1

Finally solved with:

[min]="profileform.get('address.date1').value"

Working on Angular6+

Answer 2

The form has am member called value which is a reflection of your form structure but only including the values. To access the date you simply should call [min]="profileform.value.address.date1" .