如何在响应式表单中为@Directive的@Inputs赋值？

首先得明确一点：带@Input的自定义验证指令更常用于模板驱动表单，但如果你想在响应式表单里结合使用，核心是通过模板绑定来给指令的输入属性传值，而不是在FormBuilder的代码逻辑里直接配置。下面一步步给你拆解解决方案：

1. 先补全并优化你的自定义验证指令 #

确保指令能正确接收要匹配的控件名称，并且在值变化时自动重新验证：

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

@Directive({
  selector: '[cw-match]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: MatchValidator,
      multi: true
    }
  ]
})
export class MatchValidator implements Validator {
  // 用指令选择器作为输入别名，方便模板绑定
  @Input('cw-match') matchTo!: string;

  validate(control: AbstractControl): ValidationErrors | null {
    // 兜底判断：确保控件有父级FormGroup且传入了目标控件名
    if (!control.parent || !this.matchTo) {
      return null;
    }

    // 从父FormGroup中获取要匹配的目标控件
    const targetControl = control.parent.get(this.matchTo);
    if (!targetControl) {
      return { targetControlNotFound: true };
    }

    // 监听目标控件和当前控件的值变化，触发重新验证
    if (!control.valueChanges.isStopped) {
      control.valueChanges.subscribe(() => {
        control.updateValueAndValidity({ emitEvent: false });
      });
      targetControl.valueChanges.subscribe(() => {
        control.updateValueAndValidity({ emitEvent: false });
      });
    }

    // 对比值，不匹配返回错误对象
    return control.value === targetControl.value ? null : { mismatch: true };
  }
}

2. 用FormBuilder创建响应式表单模型 #

在组件类里，只需要正常创建包含目标控件的FormGroup即可，不需要在这里配置验证指令的输入：

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

@Component({
  selector: 'app-password-form',
  templateUrl: './password-form.component.html'
})
export class PasswordFormComponent implements OnInit {
  passwordForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.passwordForm = this.fb.group({
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required]
      // 注意：这里不需要给confirmPassword配置MatchValidator，指令的逻辑在模板里处理
    });
  }

  onSubmit(): void {
    if (this.passwordForm.valid) {
      console.log('表单提交成功:', this.passwordForm.value);
    }
  }
}

3. 在模板中绑定指令并传递@Input值 #

这一步是关键：给需要验证的控件添加cw-match指令，通过属性绑定把要匹配的控件名称（比如password）传给指令的@Input：

<form [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="password">密码:</label>
    <input type="password" id="password" formControlName="password">
    <!-- 密码控件的错误提示 -->
    <small *ngIf="passwordForm.get('password')?.hasError('required')" class="error">
      密码不能为空
    </small>
    <small *ngIf="passwordForm.get('password')?.hasError('minlength')" class="error">
      密码长度不能少于6位
    </small>
  </div>

  <div class="form-group">
    <label for="confirmPassword">确认密码:</label>
    <!-- 这里添加cw-match指令，并绑定要匹配的控件名 -->
    <input 
      type="password" 
      id="confirmPassword" 
      formControlName="confirmPassword"
      [cw-match]="'password'"
    >
    <!-- 确认密码的错误提示 -->
    <small *ngIf="passwordForm.get('confirmPassword')?.hasError('required')" class="error">
      请确认密码
    </small>
    <small *ngIf="passwordForm.get('confirmPassword')?.hasError('mismatch')" class="error">
      两次输入的密码不一致
    </small>
  </div>

  <button type="submit" [disabled]="!passwordForm.valid">提交表单</button>
</form>

额外：更适合响应式表单的替代方案 #

如果你更习惯在代码层面配置验证器，建议把匹配逻辑写成独立的验证函数，这样不需要依赖模板指令，更贴合响应式表单的编码习惯：

// 独立的匹配验证函数
export function matchValidator(matchTo: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.parent || !matchTo) return null;
    const targetControl = control.parent.get(matchTo);
    return targetControl && control.value === targetControl.value ? null : { mismatch: true };
  };
}

// 在FormBuilder中直接使用
this.passwordForm = this.fb.group({
  password: ['', [Validators.required, Validators.minLength(6)]],
  confirmPassword: ['', [Validators.required, matchValidator('password')]]
});

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