0
128
ViewsHow can uncheck the first radio button when selecting the second one and reverse when having 2 radio groups?
I want to archive that if i select the first radio button i should receive value true and the second radio button should be unselected and receive the value false also in reverse if i select the second radio button i should receive value true and the first radio button should be unselected and receive value false: Important is that on submit to send 2 parameters on backend True/False for each Radio that is the reason why i have not placed them in the same group
This is my actual html Component:
<div class="col-3 col-sm-3 col-md-3 mb-2">
<mat-radio-group aria-label="Select an option" formControlName="male">
<mat-radio-button [value]="true" [checked]="false" [(ngModel)]="male" name="male" (change)="firstRadioChange($event)">Male</mat-radio-button>
</mat-radio-group>
<mat-radio-group aria-label="Select an option" formControlName="female">
<mat-radio-button [value]="false" [checked]="false" [(ngModel)]="female" name="female" (change)="secondRadioChange($event)" >Female</mat-radio-button>
</mat-radio-group>
</div>
This is my ts:
firstRadioChange($event){
console.log($event.value)
}
secondRadioChange($event){
console.log($event.value)
}
3 answers
Answer question0
I would simply group the radio buttons, by default only one of them can be enabled.
<mat-radio-group aria-label="Select an option" (change)="onChange($event)">
<mat-radio-button value="1">Option 1 Male</mat-radio-button>
<mat-radio-button value="2">Option 2 Female</mat-radio-button>
<br>
<br>
Selected value: {{selectedValue | json}}, send to backend sex as: {{selectedSexObj | json}}
</mat-radio-group>
@Component({
selector: 'radio-overview-example',
templateUrl: 'radio-overview-example.html',
styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
selectedSexObj = { male: false, female: false };
selectedValue: any;
onChange(event: any) {
this.selectedValue = event.value;
if (event.value == 1) {
this.selectedSexObj = { male: true, female: false };
} else {
this.selectedSexObj = { male: false, female: true };
}
}
}
Here is a working example: https://stackblitz.com/edit/angular-qggcqg-qydurn?file=src%2Fapp%2Fradio-overview-example.ts
0
A couple of notes on your attempt.
- You are using both Template Driven-Forms and Reactive Forms, you should use just one on each input or else they might interfere with each other. In the demo below, I have used the Reactive Forms approach.
- You used 2
mat-radio-groupbut you should use just one for the UI, then before sending the data, you modify the data according to your needs.
Here is the relevante code:
HTML
<div class="col-3 col-sm-3 col-md-3 mb-2">
<mat-radio-group aria-label="Select an option" [formControl]="gender">
<mat-radio-button value="male"> Male </mat-radio-button>
<mat-radio-button value="female"> Female </mat-radio-button>
<mat-radio-button value="other"> Other </mat-radio-button>
</mat-radio-group>
</div>
TS
gender: FormControl = new FormControl('male');
submit() {
const responseToServer = {
male: this.gender.value === 'male',
female: this.gender.value === 'female',
other: this.gender.value === 'other',
};
this.http.post('your-server-url', responseToServer);
}
0
You can follow this example
Radio-buttons should typically be placed inside of an unless the DOM structure would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a value property that reflects the currently selected radio-button inside of the group.
https://stackblitz.com/edit/angular-tgufpa?file=src%2Fapp%2Fradio-overview-example.html