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

CodePudding user response：

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-tgufpa?file=src/app/radio-overview-example.html

CodePudding user response：

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

StackBlitz Demo