Angular 2 : 在界面中创建对象

Question

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

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

在界面中，有指定字符串、数字、数组类型语法的选项

我尝试了以下选项，但没有成功，它抛出错误 "ERROR Error: Cannot find control with name:"（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 中尝试并尝试在 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

Angular 2 : 在界面中创建对象

Angular 2 : Creating object in interface

typescript

angular2-forms

angular