将对象设置为 formControlName（下拉菜单）

Question

我正在尝试以 Angular 7 的反应形式实现编辑操作。当引导模型打开时，我必须根据 db 调用从选择下拉列表中选择一个默认值。一旦它自动分配，另一个下拉列表也应该根据 db 调用自动填充。

我的问题是，我必须在 [ngValue] 中设置一个对象。以下代码在模型打开时未分配。

但如果我放了

[value]='depToBranch.company.id' 和 this.signupForm.get('company').patchValue(this.setEditUser.company.id); 正常工作（这里我只使用 'id'，而不是对象）。

两者之间的唯一区别是值始终是字符串，其中 在 ngValue 中你可以传递对象

如何在使用对象打开模型时分配默认值？提前致谢。

html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<select formControlName="company" (ngModelChange)="onSelectedCompnay($event)">
    <option  *ngFor="let depToBranch of depToBranchs" [ngValue]="depToBranch.company">{{depToBranch.company.name}}</option>
</select>

<select formControlName="branch" (ngModelChange)="onSelectBranch($event)">
    <option *ngFor="let filterBranch of filterBranchs" [ngValue]="filterBranch.branch">{{filterBranch.branch.name}}</option>
</select>

// few other fields
</form>

.ts

@Input() setEditUser: User;
@Input() edit: boolean;
signupForm: FormGroup;

ngOnInit() {
    this.signupForm = this.formBuilder.group(
        {
            company: [""],
            branch: [""]
            //// few other fields
        })
    }

ngAfterViewInit(){
    if(this.edit){
        this.signupForm.get('company').patchValue(this.setEditUser.company);
        this.signupForm.get('branch').patchValue(this.setEditUser.branch);
    }
}

Answer 1

如果你想分配一个对象需要确定是同一个对象，例如

items=[{company:1,branch:"..",...},{company:2,branch:"..",...}]
signupForm.controls.company.setValue(items.find(x=>x.company==1))

<select FormControlName="company">
   <option *ngFor="let item of items" [ngValue]="item">
</select>
{{singupForm.controls.company.value|json}}

但是，尽量不要使用（ngModelChange），如果需要，只需在创建表单后订阅更改

Answer 2

我是 Angular 的新手。但我认为你不能这样做。表单控件的值只接受数字或字符串等主要值。