概念：
Angular中的表单valid是指表单中的输入项是否符合预设的规则和条件。在Angular中，可以通过使用表单控件的属性和方法来判断表单的valid状态，例如使用form.valid属性来判断整个表单是否valid，或者使用formControl.valid属性来判断单个表单控件是否valid。
在使用表单valid的时候，可以通过在模板中使用ngIf指令来根据valid状态来显示或隐藏相应的内容，或者在组件中使用valid状态来进
应用场景：
- 表单提交前的验证：在用户提交表单之前，可以通过表单的valid状态来进行验证，确保用户输入的内容符合要求。
- 动态显示错误提示：可以根据表单控件的valid状态来动态显示错误提示信息，帮助用户更好地理解输入的要求。
- 控制提交按钮的可用状态：可以根据整个表单的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;};} }
