Angular单选按钮验证失效：循环导致局部引用重复报错

Let's break down why your validation isn't working and how to fix it:

The Root Cause #

You're placing the #f_Gender="ngModel" template reference variable inside the *ngFor loop on each radio button. This creates duplicate reference variables (one for every gender option), and Angular can't resolve which one to use outside the loop. Additionally, template variables declared inside a loop are scoped to that individual loop item—so when your error message tries to access f_Gender, it comes up as undefined.

Solution 1: Use a Parent Container with ngModel #

Wrap your radio button group in a parent element, bind the ngModel and template reference there, and keep the required validation on the group:

Component TypeScript

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  genderList: string[] = ['Male', 'Female'];
  selectedGender: string; // Holds the selected gender value
}

HTML Template

<div class="form-group">
  <label>Gender</label>
  <!-- Parent container binds ngModel and template reference -->
  <div #genderControl="ngModel" [(ngModel)]="selectedGender" name="gender" required>
    <div class="form-check" *ngFor="let gen of genderList">
      <input 
        class="form-check-input" 
        type="radio" 
        [value]="gen" 
        name="gender" <!-- Same name for all radio buttons in the group -->
      >&nbsp;
      <span class="form-check-label">{{gen}}</span>
    </div>
  </div>
  <!-- Error message uses the parent template reference -->
  <span class="text-danger" *ngIf="genderControl.invalid && (genderControl.touched || genderControl.dirty)">
    Please select gender
  </span>
</div>

Solution 2: Wrap in a Form and Access via Form Controls #

A more scalable approach is to use Angular's template-driven form system by wrapping everything in a <form> tag. This lets you access the gender control directly through the form reference:

HTML Template

<form #genderForm="ngForm">
  <div class="form-group">
    <label>Gender</label>
    <div class="form-check" *ngFor="let gen of genderList">
      <input 
        class="form-check-input" 
        type="radio" 
        [(ngModel)]="selectedGender" 
        name="gender" 
        [value]="gen" 
        required
      >&nbsp;
      <span class="form-check-label">{{gen}}</span>
    </div>
    <!-- Access the gender control through the form reference -->
    <span class="text-danger" *ngIf="genderForm.controls['gender'].invalid && (genderForm.controls['gender'].touched || genderForm.controls['gender'].dirty)">
      Please select gender
    </span>
  </div>
</form>

Key Notes #

• All radio buttons in the group must share the same name attribute—this tells Angular they belong to a single control group.
• Binding [(ngModel)] to a component property (selectedGender) ensures the selected value is synced with your component logic.
• Avoid placing template reference variables inside *ngFor loops if you need to access them outside the loop scope.

内容的提问来源于stack exchange，提问作者Ayush Saxena