Benutzerdefinierter Validator für Reactive Form

Dieses Mal stelle ich Ihnen den benutzerdefinierten Validator vor. Was sind die Vorsichtsmaßnahmen für die Verwendung des benutzerdefinierten Validators von Reactive Form? Dies ist ein praktischer Fall. Werfen wir einen Blick darauf.

In diesem Artikel werden die relevanten Inhalte von Reactive Form in Angular (Angular2+) vorgestellt, einschließlich:

• Reactive Form-Erstellungsmethode

• So verwenden Sie die Verifizierung

• Benutzerdefinierter Validator

Beginnen Sie mit dem Text unten!

Methode zur reaktiven Formularerstellung

Zuerst müssen wir FormBuilder verwenden, um eine FormGroup wie folgt zu erstellen:

registerForm: FormGroup;
constructor(
    private fb: FormBuilder,
) {}
ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: [''],
    lastName: [''],
  })
}

Die oben genannten firstName und lastName werden erstellt von Ihnen Nehmen Sie es selbst, repräsentieren Sie jeweils einen Formularsteuernamen.
Dann sieht die HTML-Seite so aus:

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
  <label>FirstName:</label>
  <input formControlName="firstName">
  <label>LastName:</label>
  <input formControlName="lastName">
  <button type="submit">Submit</button>
</form>

Dadurch entsteht ein sehr einfaches Formular!

So verwenden Sie die Validierung

Die Eingabeelemente im Formular müssen häufig überprüft werden. Wie kann dies überprüft werden?
Tatsächlich ist es sehr einfach, einige häufig verwendete Validatoren für uns zu schreiben:

ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.pattern('[A-Za-z0-9]*')],
  })
}

Sie können den „notwendigen“ Validator oder die Regelmäßigkeit verwenden Sie müssen lediglich einen regulären Ausdruck übergeben. Darüber hinaus gibt es minLength und maxLength usw.
Wenn ein Steuerelement mehrere Validatoren erfordert, können Sie diese in ein Array einfügen:

lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]]

Wenn Sie bei der Eingabe einige Eingabeaufforderungen erhalten möchten, können Sie Ihren HTML-Code wie folgt schreiben:

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
  <label>FirstName:</label>
  <input formControlName="firstName">
  <p *ngIf="registerForm.controls.firstName.touched && registerForm.controls.firstName.invalid">
    This field is required!
  </p>
  <label>LastName:</label>
  <input formControlName="lastName">
  <p *ngIf="registerForm.controls.lastName.hasError(&#39;pattern&#39;)">
    Invalid input!
  </p>
  <button type="submit" [disabled]="!registerForm.valid">Submit</button>
</form>

Das erste Steuerelement gibt eine Eingabeaufforderung aus, wenn Sie es „berühren“ und es leer ist. Das zweite Steuerelement gibt eine Eingabeaufforderung aus, wenn die Eingabe nicht den Regeln für reguläre Ausdrücke entspricht. hasErrorDie Methode kann auch übergeben werden Parameter wie required und minLength, die jeweils verschiedenen Validatoren entsprechen; schließlich wird die Schaltfläche „Senden“ deaktiviert, wenn die Eingabe nicht den Regeln entspricht.

Die verschiedenen von Angular bereitgestellten Validatoren reichen in tatsächlichen Projekten oft nicht aus, daher müssen wir Validatoren an unsere Geschäftsanforderungen anpassen!

Benutzerdefinierter Validator

Ein Validator ist eigentlich eine Methode mit return!
Jetzt schreiben wir einen Validator, um zu überprüfen, ob der Wert eines URL-Eingabefelds den Regeln entspricht:

export function validateUrl(control: AbstractControl){
  if(control.value){
    if(!control.value.startsWith('www') || !control.value.includes('.io')){
      return {
        inValidUrl: true
      }
    }
  }
  return null;
}

Wir testen, ob der Eingabewert mit „www“ beginnt und „.io“ enthält. Verwenden Sie dann die gleiche Methode wie der von Angular bereitgestellte Validator:

this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]],
    website: ['', validateUrl], // <---
})

Anschließend können Sie Ihren HTML-Code wie folgt schreiben, damit Sie bei Bedarf Eingabeaufforderungen erhalten:

<label>Website:</label>
  <input formControlName="website">
    <p *ngIf="registerForm.controls.website.invalid">
    Url must starts with www and includes .io
  </p>

OK, heute Das ist es.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

JavaScript-optimiertes DOM

So implementieren Sie die bidirektionale Datenbindung im WeChat-Applet

Das obige ist der detaillierte Inhalt vonBenutzerdefinierter Validator für Reactive Form. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!