角度2:在界面中创建对象

Question

我正在尝试创建嵌套对象，如下所示

myForm value: 
{
"name": {
"firstname":"abc",
"lastname":"xyz"
},
"address": {
"street": "assdasdasdsa",
"postcode": "8000"
}
}

在界面中，可以选择指定字符串，数字，数组类型语法

我尝试了以下选项，但没有运气，它抛出错误"错误错误：找不到带有名称的控件："(SO 和其他人的解决方法没有帮助)

export interface Customer {
name: {
firstname: string;
lastname: string;
};
addresses: Address[];
}
export interface Address {
street: string;
postcode: string;
}

您能否为我提供指定上述对象的选项？

普伦克- https://embed.plnkr.co/hQ6RtzCfPosfQl4HlbZQ/

在 Angular 1 中，使用范围对象和使用 ng-model 作为"myForm.name.firstname"很容易。

Codepen 在 angular1 中尝试 - https://codepen.io/nagasai/pen/mmYgbr 并尝试在角度 2 中复制相同

Answer 1

您的TS 中name了一个表单组，其中包含表单控件firstname和lastname。您忘记在模板中应用它。因此，您需要用formGroupName包装表单控件：

<div formGroupName="name"> <!-- Here -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" formControlName="firstname">
<input type="text" class="form-control" formControlName="lastname">
</div>

分叉的普伦克