Matselect 基于单选按钮的默认值
Matselect default values based on radiobuttons
我有三个名为 Form A、Form B、Form C 和三个名为 A、B、C.
的单选按钮
我想要的是当启用或选中单选按钮 A 时 Form A 的 默认值应为 A 和其他两个表单字段默认情况下应该没有值。当启用或选中单选按钮 B 时 Form B 的 默认值应该是 B 并且在其他两个表单字段中应该没有值 default.I 希望单选按钮 C 相同。我是从服务获取下拉数据。
示例数据:
listes: any[] = [
{ id: 1, name: "A" },
{ id: 2, name: "B" },
{ id: 3, name: "C" },];
我尝试了什么:
我试图获取具有值 A 的 id 1 并使用 setvalue 将其修补为 Form A 但它没有工作
const toSelect = this.listes.find(c => c.id == 1);
this.patientCategory.get('patientCategory').setValue(toSelect);
我已根据您描述的场景更正了您的代码。尽管我的临时代码有点冗长,但它应用了您描述的逻辑。但我希望你进一步简化它。
修复:
- 不应将 mat-option 的 [value] 属性设置为类别本身,因为类别是一个对象。 [value] 需要一个单一的唯一标识值。所以你应该将它设置为 [value] = "category.name"。理想情况下,我们将值设置为唯一标识符,例如 [value]="category.id" 或 [value]="category.key" 等
- 三个 mat-select 应该在您的场景中独立运行。所以他们永远不应该分配给同一个 formControl。相反,分配单独的 formControl 以完全控制它们。
- 最后,您可以使用分配给单选按钮的函数 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);
}
}
}
希望这对您有所帮助。如果您有任何问题,请告诉我。
我有三个名为 Form A、Form B、Form C 和三个名为 A、B、C.
的单选按钮我想要的是当启用或选中单选按钮 A 时 Form A 的 默认值应为 A 和其他两个表单字段默认情况下应该没有值。当启用或选中单选按钮 B 时 Form B 的 默认值应该是 B 并且在其他两个表单字段中应该没有值 default.I 希望单选按钮 C 相同。我是从服务获取下拉数据。
示例数据:
listes: any[] = [
{ id: 1, name: "A" },
{ id: 2, name: "B" },
{ id: 3, name: "C" },];
我尝试了什么: 我试图获取具有值 A 的 id 1 并使用 setvalue 将其修补为 Form A 但它没有工作
const toSelect = this.listes.find(c => c.id == 1);
this.patientCategory.get('patientCategory').setValue(toSelect);
我已根据您描述的场景更正了您的代码。尽管我的临时代码有点冗长,但它应用了您描述的逻辑。但我希望你进一步简化它。
修复:
- 不应将 mat-option 的 [value] 属性设置为类别本身,因为类别是一个对象。 [value] 需要一个单一的唯一标识值。所以你应该将它设置为 [value] = "category.name"。理想情况下,我们将值设置为唯一标识符,例如 [value]="category.id" 或 [value]="category.key" 等
- 三个 mat-select 应该在您的场景中独立运行。所以他们永远不应该分配给同一个 formControl。相反,分配单独的 formControl 以完全控制它们。
- 最后,您可以使用分配给单选按钮的函数 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);
}
}
}
希望这对您有所帮助。如果您有任何问题,请告诉我。