Angular: How to Select 2 Radio Buttons between 2 Radio Groups in Material?

user_10658246 0
Viewed 150

This is my component form:

<div class="col-3 col-sm-3 col-md-3 mb-2">
    <mat-radio-group aria-label="Select an option" formControlName="gender">
        <mat-radio-button [value]="true" [checked]="false" name="male">Male</mat-radio-button>
        <mat-radio-button [value]="false" [checked]="false" name="famale">Famale</mat-radio-button>
    </mat-radio-group>
    <mat-radio-group aria-label="Select an option" formControlName="name">
        <mat-radio-button [value]="false" [checked]="false"  name="benjamin">Benjamin</mat-radio-button>
        <mat-radio-button [value]="true" [checked]="false"  name="sarah">Sarah</mat-radio-button>
    </mat-radio-group>
</div>

I want to achieve something like this:

If i select the gender the name should be selected automatically refering to the current selected gender

enter image description here

i.e. if I select the gender, the name referring to the currently selected gender should be automatically selected.

angular-material angular html javascript
1 Answers
<div class="col-3 col-sm-3 col-md-3 mb-2">
    <mat-radio-group aria-label="Select an option" formControlName="gender">
        <mat-radio-button [value]="true" [checked]="false" name="male">Male</mat-radio-button>
        <mat-radio-button [value]="false" [checked]="false" name="famale">Famale</mat-radio-button>
    </mat-radio-group>
    <mat-radio-group aria-label="Select an option" formControlName="name">
        <mat-radio-button [value]="true" [checked]="form.controls['gender'].value === true" name="benjamin">Benjamin</mat-radio-button>
        <mat-radio-button [value]="false" [checked]="form.controls['gender'].value === false" name="sarah">Sarah</mat-radio-button>
    </mat-radio-group>
</div>
user_103802250
Related