Невозможно прочитать свойство 'value' из null angular реактивная форма получить значение

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

почему const city = this.addEventForm.get('address.city').value; дает мне значение (в данном случае Амстердам), но const floorInstaller = this.addEventForm.get('floor_installer.id').value; дает мне следующую ошибку в консоли разработчика, говоря: ERROR TypeError: Cannot read property 'value' of null at CalendarComponent.push..

Этот объект является результатом реактивная angular форма.

Код FormBuilder, используемый для создания формы:

        // 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: '',
        });

Answer 1

Привет, думаю, вы можете получить значение с помощью следующего фрагмента:

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

Фрагмент кода, который я пробовал:

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>

Надеюсь, это поможет. Я просто взял только город. Вы можете включить все элементы управления.

Answer 2

Может быть прямым объектом { id: '', name: '', } не распознается функцией get(). Попробуйте назначить floor_installer его собственную группу построителя форм.

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

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