angular表单的一些概念和方法

UntypedFormGroup

UntypedFormGroup 是一个类型安全的 FormGroup，它是一个表单控件容器，用于组织和管理一组表单控件

markAsPristine() 方法用于将 FormGroup 标记为 “pristine”（未修改）状态。这意味着表单控件的值没有被修改过。通常在表单提交后或者在重置表单时使用该方法来重置表单状态。

updateValueAndValidity() 方法用于更新 FormGroup 及其下所有的控件的验证状态。它会触发验证规则对每个控件进行验证，并根据验证结果更新控件的 valid、invalid、touched 以及 dirty 状态。

markAsPristine() 方法和 updateValueAndValidity() 方法是 FormGroup 提供的两个常用方法，用于管理和操作表单控件的状态和验证。

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

// 创建一个 FormGroup
const formGroup = new FormGroup({
  name: new FormControl(''),
  email: new FormControl('')
});

// 将 FormGroup 标记为 pristine
formGroup.markAsPristine();

// 更新 FormGroup 及其下所有控件的验证状态
formGroup.updateValueAndValidity();

2 如何实现表单自定义验证

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div class="form-item">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" formControlName="username" >
        </div>
        <div *ngIf="myForm.get('username')?.invalid && myForm.get('username')?.touched" class="error">用户名不能为空</div>
    </div>
    <div  class="form-item">
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" formControlName="password" >
        </div>
        <div *ngIf="myForm.get('password')?.invalid && myForm.get('password')?.touched" class="error">
            密码必须包含英文大小写并且长度在8到12之间
        </div>
    </div>
   
    <div  class="form-item">
        <div>
            <label for="phone">手机号:</label>
            <input type="text" id="phone" formControlName="phone" >
        </div>
        <div *ngIf="myForm.get('phone')?.invalid && myForm.get('phone')?.touched" class="error">
            手机号必须是11位数字且第二个数字不能是2
        </div>
    </div>
    <div  class="form-item">
        <button type="submit">提交</button>
    </div>
  

  </form>

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

@Component({
  selector: 'app-formpage',
  templateUrl: './formpage.component.html',
  styleUrls: ['./formpage.component.less']
})
export class FormpageComponent {
  myForm:FormGroup;
  constructor(private fb:FormBuilder){
    this.myForm=this.fb.group({
      username:['',Validators.required],
      password:['',Validators.required,this.passwordValidator],
      phone:['',Validators.required,Validators.pattern(/^1[^2]\d{9}$/)],
    })
  }
  validateField(field:string){

    const control=this.myForm.get(field);
    console.log("control:",control)
    if(control?.invalid){
      control.markAllAsTouched()
    }
  }

  // 异步密码验证器函数
  passwordValidator(control: FormControl): Promise<{ [key: string]: boolean } | null> {
      const value = control.value;
      const valid =  value.length >= 8 && value.length <= 12;
      console.log("control.value:",control.value)
      return new Promise((resolve,reject)=>{
            if (!valid) {
              resolve({ invalidPassword: true });
            } else {
              resolve(null);
            }
      })
}
  onSubmit(){
    if(this.myForm.valid){
      console.log("this,.form.value",this.myForm.value)
    }else{
      console.log("--invaid--")
      console.log("this,.form.value",this.myForm.value)
      this.myForm.markAllAsTouched()
    }
  }
}

注意一点：验证函数如果通过要返回null，所以我们验证函数最后的返回值一定要考虑null这个值。也就是passwordValidator(control: FormControl): Promise<{ [key: string]: boolean } | null>

提交的时候如果没有通过需要给表单调用markAllAsTouched（）方法。这样会展示错误信息

angular表单的一些概念和方法

猜你喜欢