面试题：Angular异步验证器与国际化及动态表单的深度集成

1. 异步验证器与国际化（i18n）的无缝集成

使用 Angular 的 i18n 管道：

在异步验证器返回的错误对象中，使用一个唯一的错误代码。例如：

export function asyncValidatorFactory(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return new Observable(observer => {
      // 异步验证逻辑
      const isValid = true; // 实际验证逻辑
      if (!isValid) {
        observer.next({ 'asyncValidationError': true });
      } else {
        observer.next(null);
      }
      observer.complete();
    });
  };
}

在模板中，使用 | i18n 管道来翻译错误信息。假设我们有一个 formControl 绑定到 myControl：

<input formControlName="myControl">
<div *ngIf="form.get('myControl').hasError('asyncValidationError')" i18n="async validation error|Async validation error message@@asyncValidationError">
  异步验证失败，请检查输入。
</div>

生成 .xlf 文件（Angular i18n 国际化文件），并使用 ng xi18n 命令更新翻译文件。根据不同语言环境，翻译人员可以在相应的 .xlf 文件中翻译错误信息。

使用国际化服务：

创建一个国际化服务，例如 TranslationService。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TranslationService {
  private translations: { [key: string]: string } = {};

  constructor() {
    // 假设从后端加载不同语言的翻译
    this.translations['asyncValidationError'] = '异步验证失败，请检查输入。';
  }

  getTranslation(key: string): string {
    return this.translations[key];
  }
}

在异步验证器中注入该服务，并在返回错误信息时使用它。

import { Injectable } from '@angular/core';
import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AsyncValidatorService {
  constructor(private translationService: TranslationService) {}

  asyncValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return new Observable(observer => {
        // 异步验证逻辑
        const isValid = true; // 实际验证逻辑
        if (!isValid) {
          const errorMessage = this.translationService.getTranslation('asyncValidationError');
          observer.next({ 'asyncValidationError': errorMessage });
        } else {
          observer.next(null);
        }
        observer.complete();
      });
    };
  }
}

在模板中，直接显示异步验证器返回的错误信息。

<input formControlName="myControl">
<div *ngIf="form.get('myControl').hasError('asyncValidationError')">
  {{ form.get('myControl').getError('asyncValidationError') }}
</div>

2. 动态表单场景下异步验证器的生命周期管理

创建异步验证器：

在动态表单生成逻辑中，根据用户选择动态创建异步验证器。例如，假设我们有一个 FormBuilder 服务和一个 AsyncValidatorService：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AsyncValidatorService } from './async - validator.service';

@Component({
  selector: 'app - dynamic - form',
  templateUrl: './dynamic - form.component.html',
  styleUrls: ['./dynamic - form.component.css']
})
export class DynamicFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder, private asyncValidatorService: AsyncValidatorService) {
    this.form = this.fb.group({});
    this.addDynamicField();
  }

  addDynamicField() {
    // 根据用户选择决定是否添加异步验证器
    const shouldAddAsyncValidator = true; // 实际逻辑
    const control = this.fb.control('', { asyncValidators: shouldAddAsyncValidator? [this.asyncValidatorService.asyncValidator()] : null });
    this.form.addControl('dynamicField', control);
  }
}

销毁异步验证器：

当需要移除异步验证器时，从表单控件中移除它。

removeAsyncValidator() {
  const control = this.form.get('dynamicField');
  if (control) {
    control.clearAsyncValidators();
    control.updateValueAndValidity();
  }
}

重新配置异步验证器：

可以先移除现有的异步验证器，然后根据新的配置重新添加。

reconfigureAsyncValidator() {
  const control = this.form.get('dynamicField');
  if (control) {
    control.clearAsyncValidators();
    const newShouldAddAsyncValidator = false; // 新的配置逻辑
    control.setAsyncValidators(newShouldAddAsyncValidator? [this.asyncValidatorService.asyncValidator()] : null);
    control.updateValueAndValidity();
  }
}

星途面试题库

面试题：Angular异步验证器与国际化及动态表单的深度集成

知识考点

面试题答案

1. 异步验证器与国际化（i18n）的无缝集成

2. 动态表单场景下异步验证器的生命周期管理