Angular中*ngIf导致模板变量repeatedPassword未定义的问题及解决方案

Hey there, let's dig into why this is happening and fix it without ditching that *ngIf!

Why This Happens #

The root issue here is Angular's template variable scoping rules. Structural directives like *ngIf create their own isolated template context (a separate view container). Any template variable defined inside that *ngIf block (like #repeatedPassword) is only accessible within that block—you can't reference it from outside the directive's scope.

Even though your parent NgForm correctly registers the repeatedPassword FormControl (since form controls are registered via their name attribute and ngModel, regardless of template scope), the repeatedPassword variable you're trying to use in the outer validation div doesn't exist there. That's why the (repeatedPassword !== undefined && !repeatedPassword.valid) check never works, even when the input is visible.

Fixes Without Removing *ngIf #

Here are three solid solutions to get your validation working as expected:

1. Use the Parent NgForm's Controls Collection

Since your parent component already manages the NgForm, you can directly access the repeatedPassword control's state through the form's controls property, no template variable needed.

First, add a template variable to your parent <form> tag:

<form #parentForm="ngForm">
  <!-- Your child component here -->
</form>

Then update your validation div in the child component:

<div *ngIf="!password.valid || (withPasswordRepeat && parentForm.controls['repeatedPassword']?.invalid)">
  this is invalid...
</div>

This works because NgForm tracks all registered controls, even those rendered conditionally, and you can access them by their name attribute.

2. Move Validation Logic Inside the *ngIf Scope

Restructure your template so the validation logic that depends on repeatedPassword lives inside the same *ngIf block as the input. This keeps the template variable within its accessible scope:

<div>
  <input [name]="name" #password="ngModel" required [(ngModel)]="pendingAccount.Password" />
  
  <!-- Wrap repeated password input and its related validation -->
  <ng-container *ngIf="withPasswordRepeat">
    <input name="repeatedPassword" #repeatedPassword="ngModel" required [(ngModel)]="pendingAccount.RepeatedPassword" />
    <div *ngIf="!password.valid || !repeatedPassword.valid">this is invalid...</div>
  </ng-container>
  
  <!-- Fallback validation for when repeat password is hidden -->
  <div *ngIf="!withPasswordRepeat && !password.valid">this is invalid...</div>
</div>

This splits the validation into two cases, ensuring each part has access to the variables it needs.

3. Get the NgModel Reference via ViewChild

In your component class, use ViewChild to grab the repeatedPassword NgModel instance, then expose a computed property for the template to use:

First, update your component class:

import { Component, ViewChild, NgModel } from '@angular/core';

@Component({
  // Your component metadata here
})
export class YourChildComponent {
  @ViewChild('repeatedPassword') repeatedPassword?: NgModel;
  withPasswordRepeat: boolean = false;
  pendingAccount = { Password: '', RepeatedPassword: '' };
  name = 'password';

  get isRepeatedPasswordInvalid(): boolean {
    // Return false if the control doesn't exist yet
    return this.repeatedPassword?.invalid ?? false;
  }
}

Then adjust your template's validation check:

<div *ngIf="!password.valid || (withPasswordRepeat && isRepeatedPasswordInvalid)">
  this is invalid...
</div>

ViewChild will automatically fetch the NgModel reference once the *ngIf renders the input, making its state accessible to the outer template via the component's property.

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