如何在选择第二个单选按钮时取消选中第一个单选按钮，并在有 2 个单选组时取消选中？

Question

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

Answer 1

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

Answer 2

You can follow this example

Radio-buttons should typically be placed inside of an unless the DOM structure would make that impossible (eg, 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

Answer 3

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-group but 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(responseToServer);
}

StackBlitz Demo

Answer 4

Im not familiar with angular, are you submitting the form to server side in the end? If so you could use one radio group with both options as ui but sending it as a first options true/false data, and for second option could use hidden input which you set manually on change of radio group to opposite value of radio group.