Comment démarrer rapidement avec VUE3.0 : Saisir pour apprendre
Angular propose deux méthodes différentes pour gérer la saisie des utilisateurs via des formulaires :响应式表单et模板驱动表单. [Recommandation du didacticiel connexe : "Tutoriel angulaire"]
Seuls les formulaires réactifs sont présentés ici. Pour les formulaires basés sur des modèles, veuillez vous référer au site officiel :
https://angular.cn/guide/forms-overview#setup-in-template-driven-forms
pour utiliser le contrôle de formulaire réactif, vous devez importer ReactiveFormsModule à partir du package @angular/forms et l'ajouter au tableau imports de votre NgModule . Comme suit : app.module.ts
/***** app.module.ts *****/
importer { ReactiveFormsModule } depuis '@angular/forms' ;
@NgModule({
importations : [
// autres importations...
Module de formulaires réactifs
],
})
export class AppModule { } Il y a trois étapes pour utiliser le contrôle de formulaire.
Enregistrez le module de formulaire réactif dans votre application. Ce module déclare certaines directives que vous souhaitez utiliser dans les formulaires réactifs.
Générez une nouvelle instance FormControl et enregistrez-la dans le composant.
Enregistrez ce FormControl dans le modèle.
Pour enregistrer un contrôle de formulaire, importez la classe FormControl et créez une nouvelle instance de FormControl , en l'enregistrant en tant que propriété de la classe. Comme suit : test.component.ts
/***** test.component.ts *****/
importer { Component } depuis '@angular/core' ;
importer { FormControl } depuis '@angular/forms' ;
@Composant({
sélecteur : 'éditeur de nom d'application',
templateUrl : './name-editor.component.html',
styleUrls : ['./name-editor.component.css']
})
classe d'exportation TestComponent {
// Vous pouvez définir la valeur initiale dans le constructeur de FormControl, dans cet exemple c'est la chaîne vide name = new FormControl('');
} Enregistrez ensuite le contrôle dans le modèle comme suit : test.component.html
<!-- test.component.html -->
<étiquette>
Nom : <input type="text" [formControl]="name">
</étiquette>
<!-- Si la valeur saisie en entrée change, la valeur affichée ici changera également -->
<p>name : {{ name.value }></p> Pour d'autres propriétés et méthodes de
FormControl, veuillez vous référer au manuel de référence de l'API .https://angular.cn/api/forms/FormControl#formcontrol
Tout comme une instance de FormControl vous permet de contrôler le contrôle correspondant à une seule zone de saisie, une instance de FormGroup peut également suivre un groupe de. Instances FormControl (telles que l'état d'un formulaire). Lorsqu'un FormGroup est créé, chaque contrôle qu'il contient est suivi par son nom.
Voir l'exemple de démonstration suivant : test.component.ts , test.component.html
import { Component } from '@angular/core';
importer { FormControl, FormGroup, Validators } depuis '@angular/forms'
@Composant({
sélecteur : 'app-test',
templateUrl : './test.component.html',
styleUrls : ['./test.component.css']
})
classe d'exportation TestComponent implémente OnInit {
constructeur() {}
profileForm = nouveau FormGroup({
firstName : new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
lastName : new FormControl('', Validators.required),
});
onSubmit() {
// Vérifiez les valeurs de chaque champ dans le groupe de contrôle console.log(this.profileForm.value)
}
} <!-- profileForm Ce FormGroup est lié à l'élément de formulaire via la directive FormGroup, créant une couche de communication entre le modèle et la zone de saisie du formulaire -->
<!-- La directive FormGroup écoute également l'événement submit émis par l'élément form et émet un événement ngSubmit, vous permettant de lier une fonction de rappel. -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<étiquette>
<!-- La directive FormControlName lie chaque zone de saisie au contrôle de formulaire FormControl défini dans FormGroup. Ces contrôles de formulaire communiqueront avec les éléments correspondants -->
Prénom : <input type="text" formControlName="firstName">
</étiquette>
<étiquette>
Nom : <input type="text" formControlName="lastName">
</étiquette>
<button type="submit" [disabled]="!profileForm.valid">Soumettre</button>
</form>
<p>{{ profileForm.value }}</p>
<!-- Le statut du groupe témoin : INVALIDE ou VALIDE -->
<p>{{ profileForm.status }></p>
<!-- Si la valeur saisie par le groupe témoin est une valeur valide : vrai ou faux-->
<p>{{ profileForm.valid }}</p>
<!-- S'il faut désactiver : vrai ou faux-->
<p>{{ profileForm.disabled }></p> Pour d'autres propriétés et méthodes de
FormGroup, veuillez vous référer au manuel de référence de l'API .https://angular.cn/api/forms/FormGroup#formgroup
. Dans les formulaires réactifs, lorsque vous devez gérer plusieurs formulaires, la création manuelle de plusieurs instances de contrôle de formulaire sera très fastidieuse. Le service FormBuilder fournit des méthodes pratiques pour générer des contrôles de formulaire. FormBuilder crée et renvoie ces instances de la même manière en arrière-plan, c'est simplement plus simple à utiliser.
FormBuilder est un fournisseur de services injectables fourni par ReactiveFormModule . Cette dépendance peut être injectée en l'ajoutant simplement au constructeur du composant.
Le service
FormBuilderdispose de trois méthodes :control(),group()etarray(). Ces méthodes sont des méthodes d'usine permettant de générer respectivementFormControl,FormGroupetFormArraydans la classe de composant.
Voir l'exemple suivant : test.component.ts
import { Component } from '@angular/core';
// 1. Importer FormBuilder
importer { FormBuilder, Validators } depuis '@angular/forms' ;
@Composant({
sélecteur : 'app-test',
templateUrl : './test.component.html',
styleUrls : ['./test.component.css']
})
classe d'exportation TestComponent {
// 2. Injecter le constructeur du service FormBuilder (fb privé : FormBuilder) { }
ngOnInit() { }
profileForm = this.fb.group({
prénom : ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
nom : ['', Validators.required],
});
// Équivalent à // profileForm = new FormGroup({
// prénom : new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
// nom de famille : new FormControl('', Validators.required),
// });
onSubmit() {
console.log(this.profileForm.value)
console.log(this.profileForm)
}
} En comparaison, on peut constater que l'utilisation du service FormBuilder peut générer plus facilement FormControl , FormGroup et FormArray sans avoir à créer manuellement une new instance à chaque fois.
Pour une liste complète des validateurs de classe
Validators, reportez-vous au manuel de l'APIhttps://angular.cn/api/forms/Validators
La fonction validateur ( Validators ) peut être une fonction synchrone ou une fonction asynchrone.
FormControl .Promise ou Observable , qui émet ensuite un ensemble d'erreurs de validation ou null. Ils peuvent être transmis comme troisième paramètre lors de l'instanciation FormControl .Pour des raisons de performances, Angular n'exécutera pas de validateurs asynchrones tant que tous les validateurs synchrones n'auront pas réussi. Ces erreurs de validation sont définies après l'exécution de chaque validateur asynchrone.
https://angular.cn/api/forms/Validators
Validateurs de classe {
static min(min: number): ValidatorFn // La valeur minimale pouvant être saisie static max(max: number): ValidatorFn // La valeur maximale static requise (control: AbstractControl): ValidationErrors null // Si elle est requise static requisTrue (contrôle : AbstractControl) : ValidationErrors null
static email(control: AbstractControl): ValidationErrors | null // S'il s'agit d'un format d'e-mail static minLength(minLength: number): ValidatorFn // Longueur minimale static maxLength(maxLength: number): ValidatorFn // Longueur maximale static pattern(pattern: string | RegExp) : ValidatorFn // Correspondance régulière static nullValidator(control: AbstractControl) : ValidationErrors |
static composeAsync (validateurs : AsyncValidatorFn[]) : AsyncValidatorFn null |
} import { Validators } from '@angular/forms' lors de l'instanciation du contrôle FormControl
...
ngOnInit() : vide {
this.heroForm = nouveau FormGroup({
// Instancie le nom du contrôle FormControl : new FormControl(this.hero.name, [
Validators.required, // Validation, obligatoire Validators.minLength(4), // La longueur n'est pas inférieure à 4
interditNameValidator(/bob/i) // Validateur personnalisé]),
alterEgo : nouveau FormControl(this.hero.alterEgo),
pouvoir : nouveau FormControl (this.hero.power, Validators.required)
});
}
get nom() { return this.heroForm.get('nom' }
get power() { return this.heroForm.get('power'); } Pour le contenu du validateur personnalisé, veuillez vous référer au manuel de l'API
https://angular.cn/guide/form-validation
Parfois intégré validation Le processeur ne peut pas très bien répondre aux besoins.Par exemple, nous devons vérifier un formulaire et la valeur d'entrée ne peut être que la valeur d'un certain tableau, et la valeur de ce tableau change en temps réel à mesure que le programme s'exécute. À ce moment-là, le validateur intégré ne peut pas répondre à cette exigence et un validateur personnalisé doit être créé.
Ajoutez des validateurs personnalisés dans des formulaires réactifs. Dans la section du validateur intégré ci-dessus, il existe une fonction forbiddenNameValidator comme suit :
import { Validators } from '@angular/forms';
...
ngOnInit() : vide {
this.heroForm = nouveau FormGroup({
nom : nouveau FormControl (this.hero.name, [
Validateurs.obligatoires,
Validateurs.minLength(4),
// 1. Ajouter un validateur personnalisé interditNameValidator(/bob/i)
])
});
}
// 2. Implémentez un validateur personnalisé dont la fonction est d'interdire la saisie de valeurs avec la fonction d'exportation de chaîne bob interditeNameValidator(nameRe: RegExp): ValidatorFn {
return (contrôle : AbstractControl) : ValidationErrors | null => {
const interdit = nameRe.test(control.value);
// 3. Renvoie null lorsque la valeur est valide, ou renvoie l'objet d'erreur de vérification lorsqu'il est invalide return interdit ? {forbiddenName: {value: control.value}} : null;
} ;
} Le validateur renvoie
nullsi la valeur est valide, ou验证错误对象si elle n'est pas valide. Les objets d'erreur d'authentification ont généralement un attribut appelé clé d'authentification (forbiddenName). Sa valeur est un dictionnaire arbitraire que vous pouvez utiliser pour insérer des messages d'erreur ({name}).
Ajoutez des validateurs personnalisés dans des formulaires basés sur des modèles. Pour ajouter une directive au modèle, la directive contient la fonction validator . En même temps, cette directive doit s'enregistrer en tant que fournisseur de NG_VALIDATORS . Comme indiqué ci-dessous :
// 1. Importez les classes associées import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms' ;
importer {Input} depuis '@angular/core'
@Directif({
sélecteur : '[appForbiddenName]',
// 2. Inscrivez-vous en tant que fournisseur de fournisseurs de jetons NG_VALIDATORS : [{provide : NG_VALIDATORS, useExisting : ForbiddenValidatorDirective, multi : true}]
})
classe d'exportation ForbiddenValidatorDirective implémente Validator {
@Input('appForbiddenName') interditName = '';
// 3. Implémentez l'interface du validateur, c'est-à-dire implémentez la fonction de validation validate(control: AbstractControl): ValidationErrors | null {
// Renvoie null lorsque la valeur est valide, ou renvoie l'objet d'erreur de validation lorsqu'il n'est pas valide return this.forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
: nul;
}
}
// 4. Fonction d'exportation de fonction de vérification personnalisée interditeNameValidator(nameRe: RegExp): ValidatorFn {
return (contrôle : AbstractControl) : ValidationErrors | null => {
const interdit = nameRe.test(control.value);
// 3. Renvoie null lorsque la valeur est valide, ou renvoie l'objet d'erreur de vérification lorsqu'il est invalide return interdit ? {forbiddenName: {value: control.value}} : null;
} ;
} Notez que les directives de validation personnalisées sont instanciées avec
useExistingau lieu deuseClass. SiuseClassest utilisé à la place deuseExisting, une nouvelle instance de classe sera enregistrée, mais elle n'aura pasforbiddenName.
<input type="text" requis appForbiddenName="bob" [(ngModel)]="hero.name">