Angular表单验证有哪些技巧

Angular表单验证是一种强大的功能，可以帮助开发者确保用户输入的数据是准确和有效的。以下是一些常用的Angular表单验证技巧：

1. 使用内置验证器

Angular提供了许多内置验证器，如required、minlength、maxlength、email等，可以快速地为表单控件添加基本的验证逻辑。

import { FormControl } from '@angular/forms';

const usernameControl = new FormControl('', [
  Validators.required,
  Validators.minLength(3)
]);

2. 使用自定义验证器

对于更复杂的验证逻辑，可以创建自定义验证器。自定义验证器可以是同步的或异步的。

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

@Directive({
  selector: '[uniqueName]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: UniqueNameValidatorDirective,
      multi: true
    }
  ]
})
export class UniqueNameValidatorDirective implements Validator {
  @Input('uniqueName') uniqueName: string;

  constructor() {}

  validate(control: AbstractControl): ValidationErrors | null {
    // 异步验证逻辑
    return of(control.value).pipe(
      delay(400),
      map(value => this.uniqueName.includes(value) ? { repeated: true } : null)
    );
  }
}

3. 正则表达式验证

使用正则表达式可以创建自定义的验证规则，适用于验证手机号、邮箱等格式。

const phoneRegex = /^1[3-9]\d{9}$/;
const phoneControl = new FormControl('', [
  Validators.required,
  Validators.pattern(phoneRegex)
]);

4. 动态验证规则

可以根据表单的状态动态地添加或移除验证器。例如，根据用户选择的用户类型来决定是否验证工号或学号。

this.typeFormControl.valueChanges.subscribe((type) => {
  if (type === 0) {
    this.formGroup.removeControl('studentNo');
    this.formGroup.addControl('teacherNo', this.teacherNoFormControl);
  } else {
    this.formGroup.removeControl('teacherNo');
    this.formGroup.addControl('studentNo', this.studentNoFormControl);
  }
});

5. 显示验证错误信息

在模板中使用*ngIf指令来根据表单控件的状态显示错误信息。

<div *ngIf="usernameControl.invalid && (usernameControl.dirty || usernameControl.touched)">
  <small *ngIf="usernameControl.errors?.required">用户名是必填项。</small>
  <small *ngIf="usernameControl.errors?.minlength">用户名至少需要3个字符。</small>
</div>

6. 使用ngSubmit事件处理表单提交

在组件类中定义一个方法来处理表单提交事件，并在该方法中执行验证。

onSubmit() {
  if (this.form.valid) {
    console.log('表单已提交');
  } else {
    console.log('表单无效');
  }
}

7. 样式化验证状态

Angular会根据表单控件的状态自动添加CSS类，如ng-valid、ng-invalid等，可以根据这些类名来设置不同的样式。

input.ng-valid {
  border-color: #78FA89;
}

input.ng-invalid {
  border-color: #FA787E;
}

通过这些技巧，可以有效地实现Angular表单验证，提升用户体验并确保数据的准确性。