Skip to content
Advertisement

Matselect default values based on radiobuttons

I have three matformfields named Form A,Form B,Form C and three mat radio buttons named A,B,C.

What I want is that when radiobutton A is enabled or checked Form A’s default value should be A and in other two form fields there should be no value by default. When radiobutton B is enabled or checked Form B’s default value should be B and in other two form fields there should be no value by default.I want the same for radiobutton C. I am getting the dropdown data from service.

Sample data:

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

WHAT I HAVE TRIED: I tried to get the id 1 which has value A and used setvalue to patch it in Form A but its not worling

 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

Advertisement

Answer

I’ve corrected your code as per the scenario you described. Although my temporary code is a little lengthy, it applies the logic you described. But I hope you simplify it further.

Fix:

  1. [value] attribute of a mat-option shouldn’t be set to category itself as category is an object. [value] expects a singular uniquely identifying value. So you should set it to [value] = “category.name”. Ideally, we set value to unique identifiers like [value]=”category.id” or [value]=”category.key” etc.
  2. The three mat-selects should behave independently in your scneario. So they should never be assigned to the same formControl. Instead, assign individual formControls to have full control over them.
  3. Finally, you can use the function valueChange assigned to the radio buttons, to conditionally apply values in FormA, FormB and FormC as per your scenario.

<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);
    }
  }
}

Hope this helps. Let me know if you have any issues.

Advertisement