Angular FormGroup 手动验证 - TypeScript

在Angular中， FormGroup 是一个非常强大的表单组件，可以用于管理表单控件和验证表单数据。在默认情况下， Angular会自动验证表单控件的数据，但是有时候我们可能需要手动验证表单数据。

手动验证

手动验证表单数据可以通过FormGroup的valid属性来判断表单数据是否有效。但是，这种方法并不够灵活，因为它只能判断整个表单的有效性，无法针对某个具体的表单控件进行验证。

针对具体表单控件进行验证

在Angular中，每个表单控件都有自己的FormControl对象，我们可以通过访问这个对象来进行控件的手动验证。

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myFormGroup">
      <input type="text" formControlName="firstName">
    </form>
  `
})
export class MyFormComponent implements OnInit {
  myFormGroup: FormGroup;

  ngOnInit() {
    this.myFormGroup = new FormGroup({
      firstName: new FormControl('', Validators.required)
    });
  }

  validateControl() {
    if (this.myFormGroup.controls.firstName.invalid) {
      // 处理无效的控件
    } else {
      // 处理有效的控件
    }
  }
}

在这个例子中，当firstName控件无效时，我们会做出某些操作。

手动设置控件为“脏的”状态

在Angular中，当用户与表单交互并修改表单控件的值时，FormControl对象会自动设置为“脏的”状态。手动设置控件为“脏的”状态可以强制触发验证器以验证控件。

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myFormGroup">
      <input type="text" formControlName="firstName">
      <button (click)="submitForm()">提交</button>
    </form>
  `
})
export class MyFormComponent implements OnInit {
  myFormGroup: FormGroup;

  ngOnInit() {
    this.myFormGroup = new FormGroup({
      firstName: new FormControl('', Validators.required)
    });
  }

  submitForm() {
    if (!this.myFormGroup.valid) {
      // 手动设置控件为“脏的”状态以触发验证器
      this.myFormGroup.controls.firstName.markAsDirty();
      return;
    }
    // 处理有效的表单
  }
}

在这个例子中，当表单控件无效时，我们手动设置控件为“脏的”状态以触发验证器。

总结

在Angular中，手动验证表单数据非常容易。只需访问表单控件的FormControl对象即可。通过设置控件为“脏的”状态可以强制触发验证器以验证控件。