我正在使用带有 Angular 2 beta“FormBuilder”的嵌套表单组结构,在我的一生中,我无法将值放入嵌套表单组。这很奇怪,因为绑定工作得很好。我可以向表单发送一个“用户”对象,它会填写用户及其地址的所有值。但是当发送表单值时(例如,发送到 HttpPost),它看起来就像下面的对象......
FWIW 我正在关注 Mosh Hamedani 在 Udemy 上的优秀 Angluar 2 课程,并检查并仔细检查了相关代码是否与他的此处匹配:https ://github.com/mosh-hamedani/angular2-course
也许我需要被告知在我的代码中还有什么地方可以查看?
这是我的表单组,如放置 {{ form.value | json }} 在我的表格末尾:
{
"name": "Leanne Graham",
"email": "Sincere@april.biz",
"phone": "1-770-736-8031 x56442",
"address": {
"street": null,
"suite": null,
"city": null,
"zipcode": null
}
}
这是我的组件中的构造函数:
constructor(
fb: FormBuilder,
private router: Router,
private usersService: UsersService,
private params: RouteParams
){
this.form = fb.group({
name: ['', Validators.required],
email: ['', EmailValidators.mustBeEmail], // I hadn't considered the obvious: if it doesn't exist it also doesn't qualify as email.
phone: [],
address: fb.group({
street: [],
suite: [],
city: [],
zipcode: []
})
});
}
这是我的模板中的表格(为简洁起见被截断):
<div class="col-md-6 well">
<!--the "fieldset" element is needed for this kind of grouped layout.-->
<form [ngFormModel]="form" (ngSubmit)="save()">
<fieldset>
<legend>User</legend>
<div class="form-group">
<label>Name</label>
<input type="text" [(ngModel)]="user.name" ngControl="name" #name="ngForm" class="form-control">
<div class="alert alert-danger" *ngIf="name.errors && name.touched">
The user name is required.
</div>
</div>
*** Email and Phone similar ***
</fieldset>
<fieldset ngControlGroup="address">
<legend>Address</legend>
<div class="form-group">
<label>Street</label>
<input type="text" [(ngModel)]="user.address.street" ng-control="street" class="form-control">
</div>
*** suite, city, and zip similar ***
</fieldset>
{{ form.value | json }}
<button [disabled]="!form.valid" class="btn btn-primary" type="submit">Save</button>
</form>
</div>