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

您能否提供我上面提到的指定对象的选项？

Plunker-https://embed.plnkr.co/hQ6RtzCfPosfQl4HlbZQ/

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

Codepen 在 angular1 - https://codepen.io/nagasai/pen/mmYgbr 中尝试并尝试在 angular 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>

Forked Plunker