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?

[min]="profileform.get('address').get('date1').value", or [min]="profileform.get('address.date1').value" — Eliseo
– Eliseo, Commented Oct 4, 2019 at 6:29

Iñigo · Accepted Answer · 2019-10-04 06:24:17Z

2

Finally solved with:

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

Working on Angular6+

answered Oct 4, 2019 at 6:24

Iñigo

2,02610 gold badges33 silver badges62 bronze badges

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

Comments

Sebastian Münster · Accepted Answer · 2019-10-04 06:25:31Z

0

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".

answered Oct 4, 2019 at 6:25

Sebastian Münster

5854 silver badges15 bronze badges

Collectives™ on Stack Overflow

Get nested reactive form value in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related