面试题：Angular表单验证在复杂嵌套结构及动态表单中的应用

设计表单验证机制
- 使用Angular的Reactive Forms：
  - Reactive Forms提供了一种响应式的方式来处理表单，非常适合这种复杂场景。通过FormGroup和FormControl来构建表单结构。例如，对于问卷的每个主题，可以创建一个FormGroup，主题下的每个问题创建一个FormControl。
  - 示例代码：

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

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

  constructor() {
    this.surveyForm = new FormGroup({
      topic1: new FormGroup({
        question1: new FormControl('', Validators.required),
        question2: new FormControl('', [Validators.required, Validators.min(1), Validators.max(10)])
      }),
      topic2: new FormGroup({
        question3: new FormControl('', Validators.required)
      })
    });
  }
}

自定义验证器：
- 对于一些特殊的验证需求，如根据之前的回答动态显示或隐藏问题的验证，需要自定义验证器。可以通过创建一个函数，返回一个ValidatorFn类型的验证器。
- 例如，假设问题4根据问题3的回答来决定是否显示并验证，若问题3回答为“是”，问题4必填：

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

export function conditionalRequiredValidator(control: AbstractControl) {
  const question3 = control.parent.get('question3');
  if (question3.value === '是' && control.value === '') {
    return { conditionalRequired: true };
  }
  return null;
}

添加验证器到表单控件：
- 将自定义验证器添加到相应的FormControl中。

this.surveyForm = new FormGroup({
  topic2: new FormGroup({
    question3: new FormControl('', Validators.required),
    question4: new FormControl('', conditionalRequiredValidator)
  })
});

处理动态表单元素的验证
- 使用*ngIf结合FormControl状态：
  - 当某个问题需要根据用户之前的回答动态显示或隐藏时，在HTML模板中使用*ngIf指令。同时，确保在动态显示时，该表单控件的验证状态能正确处理。
  - 例如：

<div formGroupName="topic2">
  <mat - form - field>
    <input matInput formControlName="question3" placeholder="问题3">
  </mat - form - field>
  <div *ngIf="surveyForm.get('topic2.question3').value === '是'">
    <mat - form - field>
      <input matInput formControlName="question4" placeholder="问题4">
      <mat - error *ngIf="surveyForm.get('topic2.question4').hasError('conditionalRequired')">问题4必填</mat - error>
    </mat - form - field>
  </div>
</div>

动态添加和移除验证器：
- 在某些情况下，可能需要根据用户输入动态添加或移除验证器。可以通过FormControl的addValidators和removeValidators方法实现。
- 例如，当某个条件满足时，为问题5添加一个新的验证器：

const question5Control = this.surveyForm.get('topic3.question5');
if (someCondition) {
  question5Control.addValidators(Validators.required);
} else {
  question5Control.removeValidators(Validators.required);
}
question5Control.updateValueAndValidity();

管理嵌套结构中的验证状态
- 利用FormGroup的状态：
  - FormGroup有valid、invalid、pending等状态。可以通过检查顶级FormGroup的状态来判断整个问卷是否有效。
  - 在模板中，可以这样显示整体状态：

<div [ngClass]="{ 'valid - form': surveyForm.valid, 'invalid - form': surveyForm.invalid }">
  <!-- 问卷内容 -->
</div>

遍历嵌套结构获取验证信息：
- 如果需要获取每个主题或问题的详细验证信息，可以递归遍历FormGroup和FormControl。

function getValidationMessages(formGroup: FormGroup | FormControl) {
  const messages: string[] = [];
  if (formGroup instanceof FormGroup) {
    Object.keys(formGroup.controls).forEach(key => {
      messages.push(...getValidationMessages(formGroup.get(key)));
    });
  } else {
    const control = formGroup;
    if (control.touched && control.invalid) {
      Object.keys(control.errors).forEach(key => {
        messages.push(`控件 ${control.name} 验证失败: ${key}`);
      });
    }
  }
  return messages;
}

优化性能以避免大量验证带来的卡顿
- 延迟验证：
  - 对于一些非关键的验证，可以延迟执行。例如，对于长文本输入的字数限制验证，可以在用户输入结束一段时间后（如500ms）再进行验证。可以使用debounceTime操作符结合Observable来实现。
  - 假设问题6是一个长文本输入，需要验证字数：

import { Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const question6Control = this.surveyForm.get('topic4.question6');
const question6Value$ = new Observable(observer => {
  question6Control.valueChanges.subscribe(value => {
    observer.next(value);
  });
});
question6Value$.pipe(debounceTime(500)).subscribe(value => {
  // 进行字数验证逻辑
});

减少不必要的验证：
- 对于动态隐藏的表单元素，在隐藏时可以移除其验证器（如果不需要保留验证状态），以减少不必要的计算。同时，对于一些不会改变验证结果的操作（如用户仅仅移动焦点），可以不触发验证。
批量验证：
- 对于多个相关的验证，可以将它们合并为一个验证器。例如，如果有多个验证都依赖于某个公共数据，将这些验证逻辑合并到一个自定义验证器中，只执行一次公共数据的获取和处理，而不是每个验证器都重复获取。

星途面试题库

面试题：Angular表单验证在复杂嵌套结构及动态表单中的应用

知识考点

面试题答案