Unable to access the value property of null in Angular reactive form when attempting to retrieve the value

Question

Unable to access the value property of null in Angular reactive form when attempting to retrieve the value

{
  "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"
}

How come when I access

const city = this.addEventForm.get('address.city').value;

, it returns a value (in this case Amsterdam), but accessing

const floorInstaller = this.addEventForm.get('floor_installer.id').value;

results in an error message in the developer console saying

ERROR TypeError: Cannot read property 'value' of null at CalendarComponent.push..

This JSON object represents a reactive form in Angular.

The FormBuilder code used to create 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: '',
        });

javascript json angular typescript

Answer 1

Answer №1

Hey there! I believe you can retrieve the value using the code snippet below:

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

Here is the code snippet that I tested:

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);
}

For the HTML, you can use the following:

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

I hope this explanation is helpful to you. For now, I have only focused on retrieving the city value. Feel free to include all the controls as needed.

Answer 2

Hey there! I believe you can retrieve the value using the code snippet below:

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

Here is the code snippet that I tested:

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);
}

For the HTML, you can use the following:

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

I hope this explanation is helpful to you. For now, I have only focused on retrieving the city value. Feel free to include all the controls as needed.

Answer 3

Answer №2

Perhaps the direct object { id: '', name: '', } is not being recognized properly by the get() function. Consider assigning floor_installer its own form builder group.

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

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

Answer 4

Perhaps the direct object { id: '', name: '', } is not being recognized properly by the get() function. Consider assigning floor_installer its own form builder group.

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

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

Unable to access the value property of null in Angular reactive form when attempting to retrieve the value

Answer №1

Answer №2

Similar questions

Combining Google app endpoints with a phonegap app: Step-by-step guide

Utilizing and interpreting the input data provided by the user in jQuery

I am trying to collapse the table header but I am having trouble doing so

What's the reason for seeing "1:powershell" in the terminal when using react.js?

Unit tests using ngMock never seem to reach completion when dealing with external promises

Use jQuery to duplicate an image that has the "active" class, then assign it as the background image for a div element

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Tips for obtaining the top 3 highest-value objects in a JavaScript array over all other elements

Adding javascript code to each page in an asp.net application

Explaining how to define a function parameter that accepts a class as an argument in TypeScript

Achieve horizontal bar movement by utilizing google.visualization.DataTable in a left-to-right motion

Find with user-friendly input/label removal function (Ionic 2)

Error message: "The post request is returning a value of 0

*ngIf is dynamically inserting elements rather than removing and replacing them

Tips for effectively simulating the formik useFormikContext function while writing unit tests using jest

What is the best way to take control of DOM alterations?

An easy way to activate the save button automatically

What prevents using super() to set values on an immutable record?

Tips for concealing or deleting a title attribute from an SVG component in Angular 2

The performance of my JavaScript function seems to be lagging