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);
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:
- [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.
- 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.
- 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.