Cannot read property 'value' of null angular reactive form get value

Question

{
  "estimate_number": "2020-1234",
  "brand": "PF",
  "floor": "Laminaat",
  "floor_type": "Normaal",
  "plint_type": "Hoog",
  "floor_installer": {
    "id": "14",
    "name": "Maestro"
  },
  "address": {
    "street": "Straatnaam 19",
    "city": "Amsterdam",
    "postal_code": "1111AB",
    "province": "Noord-Holland"
  },
  "notes": "Test note"
}

why does const city = this.addEventForm.get('address.city').value; give me a value (in this case Amsterdam) but const floorInstaller = this.addEventForm.get('floor_installer.id').value; gives me the following error in developer console saying ERROR TypeError: Cannot read property 'value' of null at CalendarComponent.push..

This object is the result of a reactive angular form.

The FormBuilder code used to make up the form:

        // FormBuilder
        const datesGroup = this.fb.group({
            start_date: '',
            start_time: { hour: 7, minute: 30 },
            end_date: '',
            end_time: { hour: 17, minute: 30 },
        });

        const addressGroup = this.fb.group({
            street: '',
            city: '',
            postal_code: '',
            province: '',
        });

        this.addEventForm = this.fb.group({
            event_dates: datesGroup,
            estimate_number: '',
            brand: '',
            floor: '',
            floor_type: '',
            plint_type: '',
            floor_installer: { id: '', name: '', },
            address: addressGroup,
            notes: '',
        });

Can share the form definition to have more clarity. The value shown, is it form value? — Anoop Rajasekhara Warrier
– Anoop Rajasekhara Warrier, Commented Mar 30, 2020 at 11:18
What value are your getting for this.addEventForm.get('floor_installer').value? — Zuckerberg
– Zuckerberg, Commented Mar 30, 2020 at 11:24
that returns the object like shown here. It only gives me the error when I add .name or .id to floor_installer — Tolgon
– Tolgon, Commented Mar 30, 2020 at 11:26

Anoop Rajasekhara Warrier · Accepted Answer · 2020-03-30 11:35:34Z

2

Hi think you may get the value with below snippet:

this.addEventForm.get("address").get("city").value

Code snippet I tried:

const addressGroup = this.fb.group({
  city: ""
});

this.addEventForm = this.fb.group({
  address: this.fb.group({
    city: ""
  })
});
getVAlue() {
 console.log(this.addEventForm.get("address").get("city").value);
}

HTML:

<form [formGroup]="addEventForm">
 <div formGroupName="address">
    <input formControlName="city" >
 </div>
</form>
<button (click)="getVAlue()">Get</button>

Hope this will help. I just took only city. You may include all the controls.

answered Mar 30, 2020 at 11:35

Anoop Rajasekhara Warrier

1,0606 silver badges15 bronze badges

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

4 Comments

Tolgon Over a year ago

Thanks for you answer but sadly that wasn't exactly my issue. I could get values fine EXCEPT for the floor_installer nested values. Sorry if my question wasn't clear enough!

Anoop Rajasekhara Warrier Over a year ago

You can try this for that : this.addEventForm.get("floor_installer").value.id this.addEventForm.get("floor_installer").value.name. If this won't work, then you need to create one more formGroup.

Tolgon Over a year ago

That worked, thank you so very much! Please add it to your answer as I marked it as correct

Anoop Rajasekhara Warrier Over a year ago

Great to here this from you... !

Barremian · Accepted Answer · 2020-03-30 11:33:33Z

0

May be the direct object { id: '', name: '', } isn't recognized by the get() function. Try assigning floor_installer it's own form builder group.

const floorInstallerGroup = this.fb.group({
  id: '',
  name: ''
});

this.addEventForm = this.fb.group({
.
.
.
  floor_installer: floorInstallerGroup,
.
.
}

answered Mar 30, 2020 at 11:33

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'value' of null angular reactive form get value

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related