Angular 表单的validation校正学习

概念：

       Angular中的表单valid是指表单中的输入项是否符合预设的规则和条件。在Angular中，可以通过使用表单控件的属性和方法来判断表单的valid状态，例如使用form.valid属性来判断整个表单是否valid，或者使用formControl.valid属性来判断单个表单控件是否valid。

        在使用表单valid的时候，可以通过在模板中使用ngIf指令来根据valid状态来显示或隐藏相应的内容，或者在组件中使用valid状态来进

应用场景：

1. 表单提交前的验证：在用户提交表单之前，可以通过表单的valid状态来进行验证，确保用户输入的内容符合要求。
2. 动态显示错误提示：可以根据表单控件的valid状态来动态显示错误提示信息，帮助用户更好地理解输入的要求。
3. 控制提交按钮的可用状态：可以根据整个表单的valid状态来控制提交按钮的可用状态，确保用户只有在输入符合要求的情况下才能提交表单。

示例：

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

@Component({
  selector: 'app-validation',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input type="text" formControlName="name">
      <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
        <p *ngIf="myForm.get('name').errors.required">Name is required</p>
      </div>
      <button type="submit">Submit</button>
    </form>
  `
})
export class ValidationComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required)
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // Form is valid, do something
    }
  }
}

使用小技巧：

• hasError方法：可以使用 hasError 方法来检查表单控件的特定错误。该方法可用于检查表单控件是否包含特定的验证错误。格式为：form.controls['表单名'].hasError('错误类型名')，比如，form.get('name').hasError('required')，在这里我们使用 hasError('required') 方法来检查名为“name”的表单控件是否包含“required”验证错误。
• 多个表单验证的书写格式为：

   this.inputForm = new FormGroup({
        inputText: new FormControl('', [Validators.required, this.forbiddenCharactersValidator()])
     });

• setValidators方法：可以动态设置表单控件的验证器。这允许我们在运行时根据特定条件更改表单控件的验证规则。

  updateValidation() {
      const nameControl = this.myForm.get('name');
      if (nameControl) {
        nameControl.setValidators([Validators.required, Validators.minLength(3)]);
        nameControl.setValidators([]);//设置成无任何表单验证
        nameControl.updateValueAndValidity();
      }
    }

• 自定义表单验证示例：

  <!-- 在模板中定义一个输入框 -->
  <input type="text" [(ngModel)]="inputText" name="inputText" [ngClass]="{ 'is-invalid': inputForm.controls.inputText.invalid }" />
  
  <!-- 在组件中定义表单控制器，以及包含自定义校验器的验证器函数 -->
  import { Component } from '@angular/core';
  import { FormControl, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    template: `<form [formGroup]="inputForm"><input type="text" [(ngModel)]="inputText" name="inputText" [ngClass]="{ 'is-invalid': inputForm.controls.inputText.invalid }" /></form>`
  })
  export class AppComponent {
    inputForm: FormGroup;
    inputText: string;
  
    constructor() {
      this.inputForm = new FormGroup({
        inputText: new FormControl('', [Validators.required, this.forbiddenCharactersValidator()])
      });
    }
  
    // 自定义表单验证器，判断输入是否包含特殊字符
    // 这个验证器的名字为forbiddenCharacters， 可用hasError('forbiddenCharacters')方法来判断表单是否有这个错误
    forbiddenCharactersValidator() {
      return (control: FormControl) => {
        const forbiddenCharacters = /[&%$#@!*]/;
        const invalid = forbiddenCharacters.test(control.value);
        return invalid ? { 'forbiddenCharacters': true } : null;
      };
    }
  }