无法从 Angular Reactive Form 中的多个无线电中检索值答案

【问题标题】：Can't retrieve value from multiple radio in Angular Reactive Form无法从 Angular Reactive Form 中的多个无线电中检索值
【发布时间】：2021-06-13 05:18:56
【问题描述】：

我正在 Angular 中制作一个测验网站，用户必须从多个单选按钮中选择答案。

这是我实现的模板。我正在使用引导程序。

<form [formGroup]="questionsForm" (ngSubmit)="onSubmit()">
        <div class="container">
            <div>
                <div class="card mt-5">
                    <h5 class="card-header">1</h5>
                    <div class="card-body">
                        <h5 class="card-title"> Question 1</h5>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <input class="form-check-input me-1" fomrControlName="q1" name="q1" type="radio" value="0"> First checkbox
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" fomrControlName="q1" name="q1" type="radio" value="0"> Second checkbox
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" fomrControlName="q1" name="q1" type="radio" value="0"> Third checkbox
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" fomrControlName="q1" name="q1" type="radio" value="1"> Fourth checkbox
                            </li>
                            <li class="list-group-item">
                                <input class="form-check-input me-1" fomrControlName="q1" name="q1" type="radio" value="1"> Fifth checkbox
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center">
            <button type="submit" class="btn btn-lg btn-primary mt-3 mb-5">Submit</button>
        </div>
    </form>

这是.ts文件中的代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.css']
})

export class QuizComponent implements OnInit {

  questionsForm:FormGroup;
  constructor(private fb:FormBuilder) {
    this.questionsForm = fb.group({
      q1:['',Validators.required]
    })
   }

  onSubmit() {
    console.log(this.questionsForm.value)
  }
}

在控制台日志中，我明白了。它是一个空字符串，而不是 0 或 1。

{q1: ""}

谢谢。

【问题讨论】：

单选按钮中有拼写错误。 formControlName 而不是 fomrControlName。

标签： javascript angular angular-reactive-forms

【解决方案1】：

尝试使用 fomrControlName="q1" 代替 formControlName="q1"

【讨论】：