Matselect 基于单选按钮的默认值

Question

我有三个名为 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);

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

Answer 1

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

修复：

不应将 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);
    }
  }
}

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

Matselect 基于单选按钮的默认值

Matselect default values based on radiobuttons

javascript

angular

typescript

angular5

angular-forms