Question

我真的希望有人能帮助我。我正在尝试在模型中达到嵌套属性，但目前无法。

这是我尝试发送到Node和Mongo后端的角度模型。

export class Address {
id: string;
name: string;
imgUrl: string;
address: {
  street?: string,
  suite?: string,
  city?: string,
  zipcode?: string
};
phone?:string;
}

这是我尝试使用model.foo.boo访问它的方式，但这显然不起作用，我尝试使用[ngModel]和（ngModelChange）这是我的html部分：

 <form name="form" #f="ngForm" class="col-md-8 m-auto" (ngSubmit)="f.form.valid && upload()" novalidate>
  <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !name.valid }">
    <label for="name">Full Name</label>
    <input type="text" class="form-control" name="name" [(ngModel)]="model.name" #name="ngModel" required>
    <div *ngIf="f.submitted && !name.valid" class="help-block">Username is required</div>
  </div>
  <div class="form-group">
    <label for="imgUrl">URL for profile image:</label>
    <input type="text" class="form-control" name="imgUrl" [(ngModel)]="model.imgUrl">
  </div>
  <div class="form-group">
    <label for="street">Street:</label>
    <input type="text" class="form-control" name="street" [ngModel]="model.address?.street" (ngModelChange)="model.address && model.address.street=$event"  >
  </div>
  <div class="form-group">
    <label for="suite">Suite:</label>
    <input type="text" class="form-control" name="suite" [(ngModel)]="model.address.suite">
  </div>
  <div class="form-group">
    <label for="city">City:</label>
    <input type="text" class="form-control" name="city" [(ngModel)]="model.address.city">
  </div>

提前谢谢！

Answer 1

如果要在表单中创建子组，则应使用NgModelGroup：

<ng-container ngModelGroup="address">
  <div class="form-group">
    <label for="street">Street:</label>
    <input type="text" class="form-control" name="street" [ngModel]="model.address?.street" (ngModelChange)="model.address && model.address.street=$event">
  </div>
  ...
</ng-container>

Ng-run Example

您还可以在阅读以下文章后创建可重复使用的AddressControl：

Angular: Nested template driven form

如何访问Angular 2的嵌套ngModel属性？

1 个答案: