Einige Konzepte und Methoden von Winkelformen

UntypedFormGroup

UntypedFormGroup ist eine typsichere FormGroup, bei der es sich um einen Formularsteuercontainer handelt, der zum Organisieren und Verwalten einer Gruppe von Formularsteuerelementen verwendet wird

markAsPristine() Methode, die verwendet wird, um die FormGroup im „ursprünglichen“ (unveränderten) Zustand zu markieren. Dies bedeutet, dass der Wert des Formularsteuerelements nicht geändert wurde. Diese Methode wird normalerweise verwendet, um den Formularstatus nach dem Absenden des Formulars oder beim Zurücksetzen des Formulars zurückzusetzen.

updateValueAndValidity() Diese Methode wird verwendet, um den Validierungsstatus der FormGroup und aller darunter liegenden Steuerelemente zu aktualisieren. Es löst Validierungsregeln zur Validierung jedes Steuerelements aus und aktualisiert den Status valid,  und  des Steuerelements   basierend auf den Validierungsergebnissen.invalidtoucheddirty

markAsPristine() Methoden und  updateValueAndValidity() Methoden sind zwei gängige Methoden, die FormGroup zum Verwalten und Bearbeiten des Status und der Validierung von Formularsteuerelementen bereitstellt.

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 So implementieren Sie die benutzerdefinierte Formularvalidierung

<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()
    }
  }
}

Hinweis: Wenn die Verifizierungsfunktion erfolgreich ist, gibt sie null zurück, daher muss der endgültige Rückgabewert unserer Verifizierungsfunktion den Wert null berücksichtigen. Das heißt, passwordValidator(control: FormControl): Promise<{ [key: string]: boolean } | null>

Wenn es beim Absenden nicht erfolgreich ist, müssen Sie die Methode markAllAsTouched() im Formular aufrufen. Dadurch wird eine Fehlermeldung angezeigt