我使用响应式表单和Angular Material的mat-select创建了一个表单,用于创建名为“core”的对象。Core对象有两个属性:“name”和“owners”。 “所有者”属性是一个IUser对象的数组。
核心对象:
export interface ICore {
id?: number;
name: string;
owners: IUser[];
}
表格:
<form [formGroup]="parentForm">
<mat-form-field class="example-full-width">
<input matInput formControlName="name" placeholder="Name">
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Users</mat-label>
<mat-select formControlName="owners" multiple>
<mat-option *ngFor="let user of users" [value]="user"> {{ user.username }}</mat-option>
</mat-select>
</mat-form-field>
</form>
"users" 变量是一个包含所有可供选择的用户的数组。
users: IUser[];
表单功能很好,但现在我想使用同一个表单来编辑核心对象,为此当页面加载时,我需要在"所有者"表单控件中显示核心所有者。
创建表单:
createForm() {
this.coreForm = this.formBuilder.group({
name: ['', [Validators.required]],
owners: ['', [Validators.required]]
});
}
如何获取核心:
getCore() {
this.coreService.getCore(this.route.snapshot.params['id'])
.subscribe(
res => {
this.core = res;
this.updateForm();
},
err => this.toastr.error('Core has not been received!', 'Error!')
);
}
表单更新(它适用于名称属性):
updateForm() {
this.coreForm.patchValue({
name: this.core.name,
owners: this.core.owners
});
}
但所有者列表没有被添加。奇怪的是,如果我使用用户更新表单,它就能正常工作:
getUsers() {
this.usersService.getUsers()
.subscribe(
res => {
this.users = res;
this.coreForm.patchValue({
owners: res
});
},
err => this.toastr.error('User could not be received!', 'Error!')
);
}
以这种方式,所有用户都被添加为默认值。但对于核心所有者来说,它不起作用。您有任何想法我在这里做错了什么吗?
提前致谢!
compareFunction(o1: any, o2: any) { if(o1.name == o2.name && o1.id == o2.id ) return true; else return false }
- Ala Abid