Validateur personnalisé pour formulaire réactif

Cette fois, je vous présente le validateur personnalisé de Reactive Form. Quelles sont les précautions pour utiliser le validateur personnalisé de Reactive Form, comme suit. Il s'agit d'un cas pratique, jetons un oeil à cela.

Cet article présentera le contenu pertinent du formulaire réactif dans Angular (Angular2+), notamment :

• Méthode de création de formulaire réactif

• Comment utiliser la vérification

• Validateur personnalisé

Commencez le texte ci-dessous !

Méthode de création de formulaire réactif

Nous devons d'abord utiliser FormBuilder pour créer un FormGroup, comme ceci :

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

Les firstName et lastName ci-dessus sont créés par vous Prenez-le vous-même, représentant respectivement un nom de contrôle de formulaire.
Ensuite, la page HTML ressemble à ceci :

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

Cela crée un formulaire très simple !

Comment utiliser la validation

Les éléments saisis dans le formulaire doivent souvent être vérifiés, alors comment le vérifier ?
En fait, c'est très simple. Angular a déjà écrit pour nous quelques validateurs couramment utilisés. Utilisez-le simplement comme ceci :

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

Vous pouvez utiliser le validateur "nécessaire" ou la régularité. besoin de passer dans une expression régulière. De plus, il y a minLength et maxLength etc.
Si un contrôle nécessite plusieurs validateurs, vous pouvez les placer dans un tableau :

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

Si vous souhaitez obtenir des invites lors de la saisie, vous pouvez écrire votre HTML comme ceci :

<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>

Le premier contrôle donnera une invite lorsque vous le "toucherez" et qu'il est vide ; le deuxième contrôle donnera une invite lorsque l'entrée n'est pas conforme aux règles de l'expression régulière, hasErrorLa méthode peut également transmettre des paramètres tels que required et minLength, qui correspondent respectivement à des validateurs différents ; enfin, lorsque la saisie n'est pas conforme aux règles, le bouton Soumettre est désactivé.

Les nombreux validateurs fournis par Angular ne suffisent souvent pas dans les projets réels, nous devons donc personnaliser les validateurs pour répondre aux besoins de notre entreprise !

Validateur personnalisé

Un validateur est en fait une méthode avec return !
Écrivons maintenant un validateur pour vérifier si la valeur d'une zone de saisie d'URL est conforme aux règles :

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

Nous testons si la valeur d'entrée commence par "www" et contient ".io". Utilisez ensuite la même méthode que le validateur fourni par Angular :

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

Ensuite, vous pouvez écrire votre HTML comme ceci afin de pouvoir obtenir des invites le cas échéant :

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

OK, aujourd'hui c'est tout.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

DOM optimisé pour JavaScript

Comment implémenter une liaison de données bidirectionnelle dans les mini-programmes WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!