angular - Angular Material ui单选按钮获得价值

问题描述

我在使用 Angular Material UI 单选按钮时遇到问题。在这一点上我需要问一个关于如何获得单选按钮值的问题似乎很愚蠢，但我似乎无法让它在我正在处理的项目中工作。

在我的项目中，我有一张带有单选按钮的卡片可以选择一个值，还有 3 张带有滑块的卡片可以选择一个值。卡片在单击时将处于活动状态，并且在提交表单时，我会检查处于活动状态的卡片（如果数组 id == 到 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)

  }

标签： angularangular-materialradio-button

angular - Angular Material ui单选按钮获得价值

问题描述

解决方案

推荐阅读