无法读取空角度反应形式的属性“值”获取值答案

【问题标题】：Cannot read property 'value' of null angular reactive form get value无法读取空角度反应形式的属性“值”获取值
【发布时间】：2020-03-30 11:15:00
【问题描述】：

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

这个对象是反应角度形式的结果。

用于构成表单的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: '',
        });

【问题讨论】：

可以共享表单定义更清晰。显示的值，是表单值吗？
添加到主帖
this.addEventForm.get('floor_installer').value 有什么价值？
返回对象，如 here 所示。当我将 .name 或 .id 添加到 floor_installer 时，它只会给我错误

标签： javascript json angular typescript

【解决方案1】：

您好，您可能会得到以下 sn-p 的值：

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

我试过的代码 sn-p：

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>

希望这会有所帮助。我只带了城市。您可以包括所有控件。

【讨论】：

感谢您的回答，但遗憾的是这不完全是我的问题。除了 floor_installer 嵌套值之外，我可以得到很好的值。对不起，如果我的问题不够清楚！
你可以试试这个：this.addEventForm.get("floor_installer").value.id this.addEventForm.get("floor_installer").value.name。如果这不起作用，那么您需要再创建一个 formGroup。
成功了，非常感谢！请将其添加到您的答案中，因为我将其标记为正确
很高兴从你这里...！

【解决方案2】：

可能是{ id: '', name: '', } 函数无法识别直接对象get()。尝试分配 floor_installer 它自己的表单生成器组。

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

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

【讨论】：