Angular非静态自定义表单验证器导入问题求助

在Angular中，非静态的服务方法必须通过依赖注入获取服务实例后才能调用，具体步骤如下：

1. 确保验证器服务是可注入的 #

先确认formvalidator.service.ts上添加了@Injectable装饰器，确保服务能被Angular的依赖注入系统管理：

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';

@Injectable({
  providedIn: 'root' // 全局提供，也可在对应模块的providers数组中声明
})
export class FormValidatorService {
  passwordValidator(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const value = control.value;
      if (!/[0-9]/.test(value) || !/[A-Z]/.test(value)) {
        return { passwordPattern: true };
      }
      return null;
    }
  }
}

2. 在组件中注入验证器服务并使用 #

在form.component.ts中，通过构造函数注入FormValidatorService实例，然后用实例调用验证器方法：

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { FormValidatorService } from './formvalidator.service'; // 导入服务

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  myForm = this.formBuilder.group({
    name: ['', [Validators.required]],
    // 使用注入的服务实例调用验证器方法
    password: ['', [Validators.required, this.formValidator.passwordValidator()]]
  });

  // 构造函数中注入FormBuilder和验证器服务
  constructor(
    private formBuilder: FormBuilder,
    private formValidator: FormValidatorService
  ) {}
}

关键说明 #

• 非静态方法属于类的实例，不能直接通过类名调用（FormValidatorService.passwordValidator()这种写法仅适用于静态方法）。
• 通过依赖注入获取服务实例后，既符合Angular的设计原则，也能满足主管不使用静态方法的要求，同时便于后续的测试和维护。

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