У меня проблемы с Angular Переключатели UI материалов. Кажется глупым, что на данный момент мне нужно задать вопрос о том, как получить значение переключателей, но я просто не могу заставить его работать над проектом, над которым я работаю.
В моем проекте у меня есть одна карта с переключателями для выбора значения и 3 карты с ползунками для выбора значения. Карта активна, когда на нее нажимают, и когда отправляется форма, я проверяю, активна ли карта (курица, если массив id == to selectedIndex), и передаю только это значение. С ползунками это работало отлично, но с переключателями я изо всех сил пытался установить значение в моем массиве объектов на отмеченный переключатель.
Я пробовал разные вещи, такие как работа с ngModel и установка его в skillExpArr.value но это не сработало и добавило radValue элемента управления формой, который мог бы содержать значение до его присвоения массиву. Кто-нибудь, кто мог бы объяснить мне, как это сделать правильно?
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)
}