Angular确认密码验证指令库导入后报tView is null错误

我构建了一个用于验证密码确认的Angular自定义验证指令库，发布到本地npm后导入项目使用，却触发了ERROR TypeError: tView is null错误。相关代码如下：

指令库代码 #

src\lib\confirm-password-validation.directive.ts #

import { Directive } from '@angular/core';
import { FormGroup, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
@Directive({
  selector: '[appConfirmPasswordValidation]',
  providers:[{
    provide:NG_VALIDATORS,
    useClass:ConfirmPasswordValidationDirective,
    multi:true
  }]
})
export class ConfirmPasswordValidationDirective {
  constructor() {
    console.log('Form Directive')
   }
  validate(form:FormGroup|any): ValidationErrors | null {
    if(!form.controls.password || !form.controls.confirmPassword){
      return null;
    }
    if(form.controls.password.errors && form.controls.confirmPassword.errors){
      return null;
    }
    if(form.controls.password.value !== form.controls.confirmPassword.value){
      form.controls.confirmPassword.setErrors({matchPassword:true});
      return {matchPassword:true}
    }
    return null;
  }
}

src\lib\confirm-password-validation.module.ts #

import { NgModule } from '@angular/core';
import { ConfirmPasswordValidationComponent } from './confirm-password-validation.component';
import { ConfirmPasswordValidationDirective } from './confirm-password-validation.directive';

@NgModule({
  declarations: [
    ConfirmPasswordValidationComponent,
    ConfirmPasswordValidationDirective
  ],
  imports: [],
  exports: [
    ConfirmPasswordValidationComponent,
    ConfirmPasswordValidationDirective
  ]
})
export class ConfirmPasswordValidationModule { }

src\public-api.ts #

/*
 * Public API Surface of confirm-password-validation
 */

export * from './lib/confirm-password-validation.service';
export * from './lib/confirm-password-validation.component';
export * from './lib/confirm-password-validation.module';
export * from './lib/confirm-password-validation.directive';

导入项目的代码 #

src\app\app.module.ts #

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { ConfirmPasswordValidationModule } from 'confirm-password-validation';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    ConfirmPasswordValidationModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src\app\app.component.html #

<div class="w-100 d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="card p-5">
    <form [formGroup]="userForm" (ngSubmit)="submit()" appConfirmPasswordValidation>
      <div class="mb-3 mt-3">
        <label for="email" class="form-label">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" formControlName="email">
      </div>
      <div class="mb-3">
        <label for="pwd" class="form-label">Password:</label>
        <input type="password" class="form-control" placeholder="Enter password" formControlName="password">
      </div>
      <div class="mb-3">
        <label for="pwd" class="form-label">Confirm Password:</label>
        <input type="password" class="form-control" placeholder="Enter password" formControlName="confirmPassword">
        <p>
          <span *ngIf="confirmPassword?.hasError('matchPassword')">
                    Password Mismatch
          </span>
        </p>
      </div>
      <div class="form-check mb-3">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" name="remember"> Remember me
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

错误信息 #

问题原因 #

出现tView is null错误的核心原因是：在表单级验证器中直接调用form.controls.confirmPassword.setErrors({matchPassword:true})修改子控件的错误状态，这种操作会干扰Angular内部的表单状态管理机制，导致模板视图（tView）的状态异常，进而触发该错误。此外原验证逻辑存在漏洞：当密码控件已有错误时，即使确认密码不匹配也不触发验证，不符合预期。

解决方案 #

1. 修改验证器实现，避免直接修改子控件状态 #

将验证逻辑移到确认密码控件的单独验证器中，依赖密码控件的值，更符合Angular表单验证规范：

import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';

@Directive({
  selector: '[appConfirmPassword]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: ConfirmPasswordValidationDirective,
    multi: true
  }]
})
export class ConfirmPasswordValidationDirective implements Validator {
  @Input('appConfirmPassword') matchingControlName: string = '';

  validate(control: AbstractControl): ValidationErrors | null {
    if (!control.parent || !this.matchingControlName) {
      return null;
    }

    const matchingControl = control.parent.get(this.matchingControlName);
    if (!matchingControl) {
      return null;
    }

    // 密码不匹配时返回错误
    if (matchingControl.value !== control.value) {
      return { matchPassword: true };
    }

    // 匹配成功且当前控件有错误时清除错误
    if (control.hasError('matchPassword')) {
      control.setErrors(null);
    }

    return null;
  }
}

2. 调整模板使用方式 #

将指令应用到确认密码输入框上，而非表单元素：

<div class="mb-3">
  <label for="pwd" class="form-label">Confirm Password:</label>
  <input type="password" class="form-control" placeholder="Enter password" formControlName="confirmPassword"
         appConfirmPassword="password">
  <p>
    <span *ngIf="userForm.get('confirmPassword')?.hasError('matchPassword')">
      Password Mismatch
    </span>
  </p>
</div>

3. 重新构建并发布指令库 #

运行命令重新打包发布：

ng build confirm-password-validation
npm publish dist/confirm-password-validation --registry=你的本地npm地址

4. 验证修复效果 #

在导入项目中重新安装依赖，启动项目后，密码不匹配时会正确显示错误提示，且不会触发tView is null错误。

额外优化建议 #

• 添加值变化监听：订阅密码控件的valueChanges，当密码修改时主动触发确认密码控件的验证更新，确保状态同步。
• 避免在验证器中直接调用setErrors，优先通过返回错误对象让Angular自动管理状态。

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