I'm having issues with Angular Material UI radio buttons. It seems silly that at this point I need to ask a question about how to get the value of the radio buttons but I just can't seem to make it work on the project that I'm working on.
In my project, I have one card with radio buttons to choose a value and 3 cards with sliders to choose a value. A card will be active when its clicked on and when the form is submitted I check for the card that is active ( by chicken if the array id == to selectedIndex) and only pass that value. With the sliders, it worked perfectly but with the radio buttons, I struggled to set the value in my object array to the checked radio box.
I tried different things like working with ngModel and setting it to skillExpArr.value but that didn't work and adding a form control radValue that could hold the value before assigning it to the array. Anyone who could explain to me how to do it properly?
html
<mat-card *ngFor="let skillExp of skillExpArr;" [class.active]="selectedIndex === skillExp.id" (click)="selectedIndex = skillExp.id">
<div *ngIf="!skillExp.slider ;else slider">
<mat-radio-group aria-label="Select an option">
<mat-radio-button name="value" value="1" [formControl]="radValue" >I followed a workshop / <br>
played around with it</mat-radio-button>
<mat-radio-button name="value" value="5" [formControl]="radValue" >Played with it for a week ,<br>
I know the basics</mat-radio-button>
<mat-radio-button name="value" value="10" [formControl]="radValue" >Two weeks of experience </mat-radio-button>
<mat-radio-button name="value" value="20"[formControl]="radValue" >I have my first solid <br>
month of experience</mat-radio-button>
</mat-radio-group>
</div>
</mat-card>
<button mat-flat-button color="primary" (click)="onFormSubmit( skillExpArr[selectedIndex].value )">Add experience</button>
.ts
radValue = new FormControl('');
selectedIndex = 0;
skillExpArr: Array<any> = [
{
id: 0,
level: 'Rookie',
title: " I'm soooo new to this ",
value: 0,
imgPath: '../../../../../assets/JPG/rookie-exp.jpg',
enabled: false,
slider: false,
},
... ]
onFormSubmit(experience) {
console.log('form submitted and value = ', expiernece);
console.log('radio=', this.radValue.value)
}
