如何在Angular2+中结合第三方JS组件实现类Fluent风格验证？

好问题！在Angular 2+生态里，完全能找到符合你需求的基于模型声明验证、自动生成控件错误提示的方案，甚至能对标.NET Fluent Validation或者Aurelia的验证体验。咱们挨个解决你的问题：

目前社区有几个成熟的库，专门解决「模型驱动验证、自动关联表单控件」的痛点，最常用的有这两个：

1. @rxweb/reactive-form-validators #

这是Angular生态里专门做响应式表单验证的库，核心就是用装饰器给模型属性标记验证规则，然后自动生成表单控件的验证逻辑，还能一键渲染错误提示。举个简单例子：

首先定义带验证规则的模型：

import { required, minLength, email } from '@rxweb/reactive-form-validators';

export class User {
  @required()
  @minLength({ value: 3 })
  username: string;

  @required()
  @email()
  email: string;
}

然后在组件里用库提供的RxFormBuilder创建表单，自动关联模型的验证规则：

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { User } from './user.model';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private formBuilder: RxFormBuilder) {}

  ngOnInit() {
    // 直接基于模型生成带验证的表单
    this.userForm = this.formBuilder.formGroup(new User());
  }
}

模板里只需要绑定控件，用内置指令自动显示错误：

<div [formGroup]="userForm">
  <input formControlName="username" placeholder="用户名" />
  <!-- 自动渲染对应属性的错误提示 -->
  <rx-web-validation-message controlName="username"></rx-web-validation-message>

  <input formControlName="email" placeholder="邮箱" />
  <rx-web-validation-message controlName="email"></rx-web-validation-message>
</div>

2. ngx-validator #

另一个轻量库，同样支持装饰器标记模型规则，自动绑定表单控件，用法和rxweb类似，适合追求极简的场景。

如果不想用第三方库，也可以自己封装：用TypeScript装饰器给模型属性添加元数据，然后在创建表单时读取这些元数据，自动生成Angular验证器。不过这个需要自己写不少基础逻辑，不如直接用成熟库省心。

如果想复用fluent-ts-validator这类第三方验证库，核心思路是把第三方库的验证结果映射到Angular表单控件的errors对象，步骤如下：

1. 定义模型的Fluent验证规则 #

import { FluentValidator } from 'fluent-ts-validator';
import { User } from './user.model';

export class UserValidator extends FluentValidator<User> {
  constructor() {
    super();
    this.ruleFor(x => x.username)
      .notEmpty()
      .minLength(3);
    this.ruleFor(x => x.email)
      .notEmpty()
      .emailAddress();
  }
}

2. 监听表单/模型变化，映射验证结果到表单控件 #

在组件里，监听表单值的变化，调用第三方验证器，然后把错误信息同步到对应的表单控件：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { User } from './user.model';
import { UserValidator } from './user.validator';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;
  private userValidator = new UserValidator();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.formBuilder.group({
      username: [''],
      email: ['']
    });

    // 监听表单值变化，触发验证
    this.userForm.valueChanges.subscribe((user: User) => {
      const validationResult = this.userValidator.validate(user);
      
      // 先清空所有控件的旧错误
      Object.keys(this.userForm.controls).forEach(key => {
        this.userForm.get(key)?.setErrors(null);
      });

      // 如果验证不通过，把错误映射到对应控件
      if (!validationResult.isValid) {
        validationResult.errors.forEach(error => {
          const control = this.userForm.get(error.propertyName);
          if (control) {
            control.setErrors({ [error.errorCode]: error.errorMessage });
          }
        });
      }
    });
  }
}

3. 模板中显示错误 #

和普通Angular表单一样，通过控件的hasError方法判断并显示错误：

<div [formGroup]="userForm">
  <input formControlName="username" placeholder="用户名" />
  <div *ngIf="userForm.get('username')?.hasError('NotEmpty')" class="error">
    用户名不能为空
  </div>
  <div *ngIf="userForm.get('username')?.hasError('MinLength')" class="error">
    用户名至少需要3个字符
  </div>

  <input formControlName="email" placeholder="邮箱" />
  <div *ngIf="userForm.get('email')?.hasError('NotEmpty')" class="error">
    邮箱不能为空
  </div>
  <div *ngIf="userForm.get('email')?.hasError('EmailAddress')" class="error">
    请输入有效的邮箱地址
  </div>
</div>

如果是嵌套表单（比如FormGroup里嵌套FormGroup或FormArray），只需要递归遍历表单控件树，把第三方验证的错误对应到嵌套路径的控件上。

比如有嵌套模型：

export class User {
  username: string;
  address: Address;
}

export class Address {
  street: string;
  zipCode: string;
}

对应的Fluent验证规则：

this.ruleFor(x => x.address.street).notEmpty();
this.ruleFor(x => x.address.zipCode).matches(/^\d{6}$/);

然后在映射错误时，用Angular表单的get方法通过路径获取嵌套控件：

// 封装一个工具函数，处理嵌套控件的错误设置
function setNestedControlError(form: FormGroup, propertyPath: string, error: any) {
  const control = form.get(propertyPath);
  if (control) {
    // 保留原有错误，合并新错误
    control.setErrors({ ...control.errors, ...error });
  }
}

// 在验证逻辑中调用
validationResult.errors.forEach(error => {
  setNestedControlError(
    this.userForm,
    error.propertyName, // 比如 "address.street"
    { [error.errorCode]: error.errorMessage }
  );
});

模板里嵌套控件的错误显示，直接用完整路径访问控件即可：

<div [formGroup]="userForm">
  <div formGroupName="address">
    <input formControlName="street" placeholder="街道" />
    <div *ngIf="userForm.get('address.street')?.hasError('NotEmpty')" class="error">
      街道不能为空
    </div>

    <input formControlName="zipCode" placeholder="邮编" />
    <div *ngIf="userForm.get('address.zipCode')?.hasError('Matches')" class="error">
      请输入6位数字邮编
    </div>
  </div>
</div>

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