Question

我试图用角度7的反应形式实现编辑操作。当引导程序模型打开时，我必须基于db调用从select下拉列表中选择一个默认值。自动分配后，还应该根据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

我是新来的。但我认为您无法做到这一点。表单控件的值仅接受数字或字符串之类的主值。

将对象设置为formControlName（下拉列表）

2 个答案: