Question

我有一个类似下面的反应形式：

this.personForm = this.fb.group({
    firstname: [null, Validators.required],
    lastname: [null, Validators.required],
    home_id: [null],
    home_name: [null, Validators.required],
})

我正在使用API从数据库中检索主列表，并相应地填充mat-option，到目前为止，还可以，我只在mat-select内显示home_name值：

<mat-form-field class="full-width">
    <mat-select placeholder="Select Home" formControlName="home_name">
        <mat-option *ngFor="let home of homes" [value]="home.name">
            {{ home.name }}
        </mat-option>
    </mat-select>   
</mat-form-field>

现在我想在提交后发布表单值，但是当用户从下拉菜单中单击主页时，我不知道如何更新home_id？

我尝试过：

    <mat-select placeholder="Select Home" 
formControlName="home_name" 
(selectionChange)="setHomeId($event.value)">

但这只是给我家的名字

我试图将相同的代码放入<mat-option>中以获取主对象：

<mat-option *ngFor="let home of homes" 
[value]="home_name" 
(selectionChange)="setHomeId($event.value)">

但是似乎<mat-option>没有功能：(selectionChange)

Answer 1

我想你想做

<mat-select placeholder="Select Home" formControlName="home_id">
    <!---value is home.id, show home.name--->
    <mat-option *ngFor="let home of homes" [value]="home.id">{{home.name}}
    </mat-option>
</mat-select>

home_name中需要personForm真是太疯狂了。我想您的数据库仅存储home_id，如果这样，您的formGroup必须是：

this.personFrom = this.fb.group({
    firstname: [null, Validators.required],
    lastname: [null, Validators.required],
    home_id: [null]
})

注意：我不知道是否是类型错误，但看起来是personForm，而不是personFrom。

注意：更新按照@David的说法添加<mat-select formControlName="home_id"..>。

Answer 2

<mat-select (selectionChange)="updateHomeId()" </mat-select> selectionChange用户更改所选值时发出的事件。

https://material.angular.io/components/select/api

要更新反应式表单控件，您可以使用

updateHomeId() {
 this.personFrom.controls['home_id'].setValue("ID");
}

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

希望有帮助。

选择mat-option

2 个答案: