我真的希望有人能帮助我。我正在尝试在模型中达到嵌套属性,但目前无法。
这是我尝试发送到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>
提前谢谢!
答案 0 :(得分: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>
您还可以在阅读以下文章后创建可重复使用的AddressControl: