在 Angular 10 中制作单选按钮

Question

我有 2 个带有单选按钮的两选项问题作为答案。如何使单选按钮成为必需，以便在未回答时显示消息？

This article解释了如何要求单选按钮，但是只有一个问题，如果我添加第二个问题它不起作用！

这是我的 .html 文件：

<form [formGroup]="surveyForm" >          
    <table class="table" >
      <tbody >
        <tr> Question1 </tr>                
        <tr>  <input type="radio" value="1" formControlName="ans1" id="ans1.opt1"  required > a
              <input type="radio" value="2" formControlName="ans1" id="ans1.opt2"  required > b    
          </tr>
          <tr>
              <div class="form-control alert alert-danger" id="ans1Error" style="display: none;"></div>
              <div *ngIf="isValidInput('ans1')" class="alert alert-danger">
                 <div *ngIf="surveyForm.controls['ans1'].errors?.required">   
                    Answer is required.
                  </div>
               </div>
          </tr>
          <tr> Question2 </tr>                
          <tr>  <input type="radio" value="1" formControlName="ans2" id="ans2.opt1"  required > a
                <input type="radio" value="2" formControlName="ans2" id="ans2.opt2"  required > b            
          </tr>
          <tr>
              <div class="form-control alert alert-danger" id="ans2Error"  style="display: none;"></div>
              <div *ngIf="isValidInput('ans2')" class="alert alert-danger">
                  <div *ngIf="surveyForm.controls['ans2'].errors?.required">   
                    <p> Answer is required.</p>
                  </div>
              </div>
          </tr>
        </tbody>
     </table>
     <button  [disabled]="!surveyForm.valid" type="submit" class="btn btn-primary"  > Submit </button>   
</form>

和 .ts 文件：

  surveyForm!: FormGroup; 
  surveyInfo!: {
  ans1: number;
  ans2: number;          
   };
 
  constructor( private fb: FormBuilder) { }

  ngOnInit(): void {
    this.initForm();
  }
  initForm(): void {
    this.surveyForm = this.fb.group({
      ans1: ['', Validators.required],
      ans2: ['', Validators.required],                  
    });
  }

  isValidInput(fieldName: any): boolean {
    return this.surveyForm.controls[fieldName].invalid &&
      (this.surveyForm.controls[fieldName].dirty || this.surveyForm.controls[fieldName].touched);
  }
        
 

Answer 1

它的工作原理是表单按照您的要求执行。

如果您说您不知道为什么看不到错误消息，那是因为没有本地方法可以取消选择无线电输入。因此，当您单击单选输入时，它具有一个满足Validators.required 要求的值。

此外，如果表单无效，您已禁用提交按钮。如果它没有被禁用，您可以在提交时运行另一个有效性检查并在那里显示错误。

Stackblitz here 显示您的表单状态。

---

编辑： 您链接到的示例执行此操作：

 <div *ngIf="isSubmitted && myForm.invalid">
     <p>Please select either Gender</p>
  </div>

提交函数是这样的：

  templateForm(form: NgForm) {
    this.isSubmitted = true;
    if (!form.valid) {
      return false;
    } else {
      alert(JSON.stringify(form.value))
    }
  }