基于单选按钮匹配选择默认值

Question

我有三个名为Form A、Forms B和Form C的matform字段，以及三个名分别为A、B、C的mat单选按钮。

我想要的是，当启用或选中单选按钮A时，表单A的默认值应为A，而在其他两个表单字段中，默认情况下不应有值。启用或选中单选按钮B时，表单B的默认值应为B，而在其他两个表单字段中，默认情况下不应有任何值。我想要同样的单选按钮C。我正在从服务中获取下拉数据。

样本数据：

listes: any[] = [
{ id: 1, name: "A" },
{ id: 2, name: "B"  },
{ id: 3, name: "C" },];

我尝试了什么：我试图获得值为A的id 1，并使用setvalue在表单A中对其进行修补，但它不影响

const toSelect = this.listes.find(c => c.id == 1);
this.patientCategory.get('patientCategory').setValue(toSelect);

STACKBLITZ：https://stackblitz.com/edit/how-to-set-default-value-of-mat-select-when-options-are-reo3xn?file=app%2Ftable-basic-sample.html

Answer 1

我已经根据您描述的场景更正了您的代码。虽然我的临时代码有点长，但它应用了您描述的逻辑。但我希望你能进一步简化它。

修复：

垫子选项的

1. [value]属性不应设置为类别本身，因为类别是一个对象。[value]需要一个唯一标识值的单数。所以您应该将其设置为[value]="；category.name"；。理想情况下，我们将值设置为唯一标识符，如[value]＝"；category.id"；或者[value]＝"；category.key"；等等
2. 三个垫子的选择应该在你的scneario中独立表现。因此，不应将它们分配给同一个formControl。相反，指定单独的formControls以完全控制它们
3. 最后，您可以使用分配给单选按钮的函数valueChange，根据您的场景有条件地应用FormA、FormB和FormC中的值

<form [formGroup]="patientCategory">
<mat-form-field class="full-width">
<mat-select placeholder="FORMA" formControlName="patientCategoryA">
<mat-option *ngFor="let category of listes" [value]="category.name">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="full-width">
<mat-select placeholder="FORMB" formControlName="patientCategoryB">
<mat-option *ngFor="let category of listes" [value]="category.name">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="full-width">
<mat-select placeholder="FORMC" formControlName="patientCategoryC">
<mat-option *ngFor="let category of listes" [value]="category.name">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
<div class="container" style="margin-top: 0px;">
<div class="example-container">
<mat-radio-group #group="matRadioGroup" [(ngModel)]="test" [(value)]="selectedValue"
(change)="onValueChange(group.value)">
<mat-radio-button value="A" [checked]="defaultSelected">A</mat-radio-button>
<mat-radio-button style="margin-left:10px" value="B">B</mat-radio-button>
<mat-radio-button style="margin-left:10px" value="C">C</mat-radio-button>
</mat-radio-group>
</div>
</div>

import { Component, ViewChild } from "@angular/core";
import {
FormBuilder,
FormGroup,
FormControl,
Validators
} from "@angular/forms";
import { DataService } from "./data.service";
/**
* @title Basic table
*/
@Component({
selector: "table-basic-example",
styleUrls: ["table-basic-example.css"],
templateUrl: "table-basic-example.html"
})
export class TableBasicExample {
patientCategory: FormGroup;
listes: any[];
constructor(private fb: FormBuilder, private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(res => {
this.listes = res;
});
this.patientCategory = this.fb.group({
patientCategoryA: [null, Validators.required],
patientCategoryB: [null, Validators.required],
patientCategoryC: [null, Validators.required]
});
}
onValueChange(value) {
if (value === "A") {
this.patientCategory.get("patientCategoryA").setValue(value);
this.patientCategory.get("patientCategoryB").setValue(null);
this.patientCategory.get("patientCategoryC").setValue(null);
} else if (value === "B") {
this.patientCategory.get("patientCategoryB").setValue(value);
this.patientCategory.get("patientCategoryA").setValue(null);
this.patientCategory.get("patientCategoryC").setValue(null);
} else if (value === "C") {
this.patientCategory.get("patientCategoryC").setValue(value);
this.patientCategory.get("patientCategoryB").setValue(null);
this.patientCategory.get("patientCategoryA").setValue(null);
}
}
}

希望这能有所帮助。如果你有任何问题，请告诉我。