Dans Angular, il existe deux types de formulaires,模板驱动et模型驱动. [Tutoriels associés recommandés : "Tutoriel angulaire"]
1.1 Présentation
控制逻辑du formulaire est écrite dans组件模板, qui convient aux types de formulaires简单.
1.2 Démarrez rapidement
1). Présentez le module dépendant FormsModule
import { FormsModule } from "@angular/forms"
@NgModule({
importations : [FormsModule],
})
export class AppModule {} 2) Convertissez le formulaire DOM en ngForm
<form #f="ngForm" (submit)="onSubmit(f)"></form>
3) Déclarez le champ du formulaire comme ngModel
<form #f= " ngForm" (soumettre)="onSubmit(f)"> <input type="text" name="username" ngModel /> <bouton>Envoyer</bouton> </form>
4). Obtenez la valeur du champ de formulaire
import { NgForm } depuis "@angular/forms"
classe d'exportation AppComponent {
onSubmit (formulaire : NgForm) {
console.log(form.value) // {nom d'utilisateur : ''}
}
} 5), regroupement de formulaires
<form #f="ngForm" (submit)="onSubmit(f)">
<div ngModelGroup="utilisateur">
<input type="text" name="username" ngModel />
</div>
<div ngModelGroup="contact">
<input type="text" name="phone" ngModel />
</div>
<bouton>Envoyer</bouton>
</form> importer { NgForm } depuis "@angular/forms"
classe d'exportation AppComponent {
onSubmit (formulaire : NgForm) {
console.log(form.value) // {contact : {téléphone : ''}, utilisateur :{nom d'utilisateur : ''}}
}
} 1.3 Validation du formulaire
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel requis pattern="d" /> <bouton>Envoyer</bouton> </form>
classe d'exportation AppComponent {
onSubmit (formulaire : NgForm) {
// Vérifiez si l'intégralité du formulaire est vérifié via console.log(form.valid)
}
} <!-- Désactiver l'envoi du formulaire lorsque la validation de l'ensemble du formulaire échoue --> <button type="submit" [disabled]="f.invalid">Submit</button>
affiche le message d'erreur lorsque l'élément de formulaire échoue dans le modèle de composant.
<form #f="ngForm" (submit)="onSubmit(f)">
<input #username="ngModel" />
<div *ngIf="username.touched && !username.valid && username.errors">
<div *ngIf="username.errors.required">Veuillez remplir le nom d'utilisateur</div>
<div *ngIf="username.errors.pattern">Ne se conforme pas aux règles habituelles</div>
</div>
</form> Spécifie le style lorsque la validation de l'élément de formulaire échoue.
input.ng-touched.ng-invalid {
bordure : 2px rouge uni ;
} 2.1 Présentation
控制逻辑du formulaire est écrite dans组件类, qui a plus de contrôle sur la logique de vérification et convient aux types de formulaires复杂.
Dans un formulaire piloté par modèle, le champ de formulaire doit être une instance de FormControl . L'objet d'instance peut验证表单字段, si la valeur a été modifiée, etc.
Un ensemble de champs de formulaire constitue l'intégralité du formulaire, et l'intégralité du formulaire doit être une instance de FormGroup , qui peut effectuer une validation整体sur le formulaire.
FormControl : un élément de formulaire dans un groupe de formulaires.
FormGroup : un groupe de formulaires. Le formulaire est au moins un FormGroup
: utilisé pour les formulaires complexes. Il peut ajouter dynamiquement des éléments de formulaire ou des groupes de formulaires. échoue et le tout échoue.
2.2 Démarrez rapidement
1), introduisez
l'importation de ReactiveFormsModule { ReactiveFormsModule } depuis "@angular/forms"
@NgModule({
importations : [ReactiveFormsModule]
})
export class AppModule {} 2). Créez l'objet de contrôle de formulaire FormGroup dans la classe de composants
import { FormControl, FormGroup } à partir de "@angular/forms".
classe d'exportation AppComponent {
contactForm : FormGroup = nouveau FormGroup({
nom : nouveau FormControl(),
téléphone : nouveau FormControl()
})
} 3). Formulaire dans le modèle de composant associé
<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="name" /> <input type="text" formControlName="phone" /> <bouton>Envoyer</bouton> </form>
4). Obtenez la
classe d'exportation de la valeur du formulaire AppComponent {
onSubmit() {
console.log(this.contactForm.value)
}
} 5). Définissez la valeur par défaut du formulaire
contactForm : FormGroup = new FormGroup({
nom : new FormControl("Valeur par défaut"),
téléphone : nouveau FormControl (15888888888)
}) 6), regroupement de formulaires
contactForm : FormGroup = new FormGroup({
fullName : nouveau FormGroup ({
prénom : nouveau FormControl(),
nom : nouveau FormControl()
}),
téléphone : nouveau FormControl()
}) <form [formGroup]="contactForm" (submit)="onSubmit()">
<div formGroupName="fullName">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName" />
</div>
<input type="text" formControlName="phone" />
<bouton>Envoyer</bouton>
</form> onSubmit() {
console.log(this.contactForm.value.name.username)
console.log(this.contactForm.get(["nom", "nom d'utilisateur"])?.value)
} 2.3 Exigences FormArray
: Un groupe d'informations de contact est affiché sur la page par défaut, et d'autres groupes d'informations de contact peuvent être ajoutés en cliquant sur le bouton.
importer { Composant, OnInit } depuis "@angular/core"
importer { FormArray, FormControl, FormGroup } depuis "@angular/forms"
@Composant({
sélecteur : "app-root",
templateUrl : "./app.component.html",
styles : []
})
classe d'exportation AppComponent implémente OnInit {
// formulaire contactForm : FormGroup = new FormGroup({
contacts : nouveau FormArray([])
})
obtenir des contacts() {
renvoyer this.contactForm.get("contacts") sous forme de FormArray
}
//Ajouter les informations de contact addContact() {
//Informations de contact const myContact : FormGroup = new FormGroup({
nom : nouveau FormControl(),
adresse : new FormControl(),
téléphone : nouveau FormControl()
})
//Ajouter des informations de contact au tableau d'informations de contact this.contacts.push(myContact)
}
// Supprimer les informations de contact RemoveContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
//Ajouter les informations de contact par défaut this.addContact()
}
onSubmit() {
console.log(this.contactForm.value)
}
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<div formArrayName="contacts">
<div
*ngFor="laisser le contact de contacts.controls ; laisser i = index"
[formGroupName]="i"
>
<input type="text" formControlName="name" />
<input type="text" formControlName="adresse" />
<input type="text" formControlName="phone" />
<button (click)="removeContact(i)">Supprimer les informations de contact</button>
</div>
</div>
<button (click)="addContact()">Ajouter des informations de contact</button>
<bouton>Envoyer</bouton>
</form> 2.4 Validateur de formulaire intégré
1) Utilisez les règles de validation fournies par le validateur intégré pour valider l'
importation des champs de formulaire { FormControl, FormGroup, Validators } depuis "@angular/forms"
contactForm : FormGroup = nouveau FormGroup({
nom : new FormControl("Valeur par défaut", [
Validateurs.obligatoires,
Validateurs.minLength(2)
])
}) 2). Obtenez si l'intégralité du formulaire a réussi la vérification
onSubmit() {
console.log(this.contactForm.valid)
} <!-- Désactiver les boutons du formulaire lorsque la vérification de l'ensemble du formulaire échoue --> <button [disabled]="contactForm.invalid">Soumettre</button>
3). Afficher le message d'erreur lorsque la vérification est réussie dans le modèle de composant
get name() {
renvoie this.contactForm.get("name") !
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<input type="text" formControlName="name" />
<div *ngIf="name.touched && name.invalid && name.errors">
<div *ngIf="name.errors.required">Veuillez indiquer votre nom</div>
<div *ngIf="nom.erreurs.maxlength">
La longueur du nom ne peut pas être supérieure à {{ name.errors.maxlength.requiredLength }}. La longueur réelle est de {{ name.errors.maxlength.actualLength }}.
</div>
</div>
</form> 2.5 Validateur de formulaire synchrone personnalisé
Le type de validateur personnalisé est la classe TypeScript
. La classe contient des méthodes de vérification spécifiques. La méthode de vérification doit être une méthode statique.
La méthode de vérification a un contrôle de paramètre, de type AbstractControl. En fait, c'est le type de l'objet instance de la classe FormControl.
Si la vérification réussit, null est renvoyé.
Si la vérification échoue, l'objet est renvoyé. L'attribut dans l'objet est l'identification de la vérification et la valeur est. true, indiquant que la vérification a échoué.
La valeur de retour de la méthode de vérification est ValidationErrors | null
import { AbstractControl, ValidationErrors } from "@angular/forms".
classe d'exportation NameValidators {
// Les valeurs de champ ne peuvent pas contenir d'espaces static could notContainSpace(control: AbstractControl): ValidationErrors null {
// La vérification a échoué si (/s/.test(control.value)) return {notContainSpace: true }
// La vérification réussie renvoie null
}
} importez { NameValidators } depuis "./Name.validators"
contactForm : FormGroup = nouveau FormGroup({
nom : new FormControl("", [
Validateurs.obligatoires,
NameValidators.cannotContainSpace
])
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.cannotContainSpace">Le nom ne peut pas contenir d'espaces</div> </div>
2.6 Importation du validateur de formulaire asynchrone personnalisé
{ AbstractControl, ValidationErrors } depuis "@angular/forms"
importer {Observable} depuis "rxjs"
classe d'exportation NameValidators {
static ShouldBeUnique(control: AbstractControl): Promise<ValidationErrors null> {
renvoyer une nouvelle promesse (résolution => {
if (control.value == "admin") {
résoudre ({ ShouldBeUnique : true })
} autre {
résoudre (nul)
}
})
}
} contactForm : FormGroup = nouveau FormGroup({
nom : nouveau FormControl (
"",
[
Validateurs.obligatoires
],
NameValidators.shouldBeUnique
)
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.shouldBeUnique">Nom d'utilisateur en double</div> </div> <div *ngIf="name.ending">Détecter si les noms sont des doublons</div>
2.7 Raccourci FormBuilder
快捷créer un formulaire.
this.fb.control : élément de formulaire
this.fb.group : groupe de formulaires, le formulaire est au moins un FormGroup
this.fb.array : utilisé pour les formulaires complexes, vous pouvez y ajouter dynamiquement des éléments de formulaire ou des groupes de formulaires, lors de la validation du formulaire est un FormArray L'élément a échoué et l'ensemble a échoué.
importer { FormBuilder, FormGroup, Validators } depuis "@angular/forms"
classe d'exportation AppComponent {
formulaire de contact : FormGroup
constructeur (fb privé : FormBuilder) {
this.contactForm = this.fb.group({
nom complet : this.fb.group({
prénom : ["", [Validators.required]],
nom de famille: [""]
}),
téléphone: []
})
}
} 2.8 Surveillance des modifications des valeurs d'un formulaire
Dans le travail réel, nous devons souvent effectuer un traitement correspondant basé sur les modifications d'une valeur de formulaire. Généralement, nous pouvons utiliser ngModalChange ou un formulaire pour obtenir
2.8.1 ngModalChange
<div>. <input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" /> </div>
importer { FormControl, FormGroup } depuis "@angular/forms"
classe d'exportation AppComponent {
nom public = 'a' ;
changement de nom public() {
}
} Angular ne recommande officiellement pas d'utiliser ngModalChange.
2.8.2 Contrôle de formulaire
<div [formGroup]="contactForm"> <input type="text" formControlName="name" /> </div>
importer { FormControl, FormGroup } depuis "@angular/forms"
classe d'exportation AppComponent {
contactForm : FormGroup = nouveau FormGroup({
nom : nouveau FormControl()
})
ngOnInt() {
this.contactForm.get("name").valueChanges.subscribe(data => {
console.log(données);
}
}
} 2.9 Exercice
1), Récupérer la valeur sélectionnée dans un groupe de cases à cocher
<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="laisser l'élément de données">
<input type="checkbox" [value]="item.value" (change)="onChange ($event)" />
{{ article.nom }}
</étiquette>
<bouton>Envoyer</bouton>
</form> importer { Composant } depuis "@angular/core"
importer { FormArray, FormBuilder, FormGroup } depuis "@angular/forms"
Données d'interface {
nom : chaîne
valeur : chaîne
}
@Composant({
sélecteur : "app-checkbox",
templateUrl : "./checkbox.component.html",
styles : []
})
classe d'exportation CheckboxComponent {
Données : Array<Data> = [
{ nom : "Poire", valeur : "poire" },
{ nom : "Prune", valeur : "prune" },
{ nom : "Kiwi", valeur : "kiwi" },
{ nom : "Apple", valeur : "pomme" },
{ nom : "Chaux", valeur : "Chaux" }
]
formulaire : Groupe de formulaires
constructeur (fb privé : FormBuilder) {
ce.form = ce.fb.group({
checkArray : this.fb.array([])
})
}
onChange (événement : événement) {
const target = event.target comme HTMLInputElement
const vérifié = cible.vérifié
valeur const = cible.valeur
const checkArray = this.form.get("checkArray") comme FormArray
si (coché) {
checkArray.push(this.fb.control(value))
} autre {
const index = checkArray.controls.findIndex(
contrôle => contrôle.valeur === valeur
)
checkArray.removeAt(index)
}
}
onSubmit() {
console.log(this.form.value)
}
} 2). Obtenez la valeur sélectionnée dans la
classe d'exportation du bouton radio AppComponent {
formulaire : Groupe de formulaires
constructeur (fb public : FormBuilder) {
this.form = this.fb.group({ genre : "" })
}
onSubmit() {
console.log(this.form.value)
}
} <form [formGroup]="form" (submit)="onSubmit()"> <input type="radio" value="male" formControlName="gender" /> Homme <input type="radio" value="female" formControlName="gender" /> Femme <button type="submit">Envoyer</button> </form>
2.10 Autre
patchValue : Définit la valeur du contrôle de formulaire (vous pouvez tout définir, ou vous pouvez en définir un, les autres ne sont pas affectés)
setValue : Définit la valeur du contrôle de formulaire (définir tout, ne peut pas exclure n'importe lequel)
valueChanges : lorsque le formulaire L'événement de réinitialisation est déclenché lorsque la valeur du contrôle change
: le contenu du formulaire est vide