Plongez en profondeur dans les formulaires dans Angular

Cet article vous donnera une introduction détaillée aux formulaires dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Forme angulaire

---

Qu'est-ce qu'un formulaire modèle

Le modèle de données du formulaire est défini via les instructions pertinentes dans le modèle de composant. Car lors de la définition du modèle de données du formulaire de cette manière, nous serons limités par la syntaxe HTML, donc le. méthode basée sur un modèle uniquement Convient à certaines scènes simples.

Qu'est-ce que les formulaires réactifs

Les formulaires réactifs fournissent un moyen basé sur un modèle de gérer les entrées de formulaire dont les valeurs changent au fil du temps. Lorsque vous utilisez des formulaires réactifs, vous créez un modèle de données sous-jacent en écrivant du code TypeScript au lieu du code HTML. Une fois le modèle défini, vous utilisez des instructions spécifiques pour connecter les éléments HTML du modèle au modèle de données sous-jacent.
Remarque :

• Le modèle de données n'est pas un objet arbitraire, c'est une classe spécifique dans le module angulaire/forms, comme FormControl, il consiste de FormGroup, FormArray, etc. Dans les formulaires modèles, ces classes ne sont pas accessibles directement. [Recommandations associées : "Tutoriel angulaire"]

• Les formulaires réactifs ne généreront pas de HTML pour vous, le modèle doit toujours être écrit par vous-même.

• Dans le formulaire modèle, vous ne pouvez pas accéder aux classes associées du modèle de données, et vous ne pouvez obtenir que les données finales du formulaire dans le formulaire réactif, vous pouvez accéder aux classes ; liés au modèle de données, mais comme ils ne sont pas référençables, ils ne peuvent pas être manipulés dans des modèles, uniquement dans du code TypeScript.

Formulaire réactif

FormGroup

FormGroup It peut représenter une partie du formulaire ou l'intégralité du formulaire. Il s'agit d'une collection de plusieurs FormControls. FormGroup regroupe les valeurs et l'état de plusieurs FormControl Lors de la validation du formulaire, si un FormControl du FormGroup n'est pas valide, l'ensemble du FormGroup sera invalide.

FormControl

FormControl est l'unité de base qui constitue un formulaire. Elle est généralement utilisée pour représenter un élément d'entrée, mais elle peut également être utilisée pour représenter un élément plus complexe. composant, tel que Calendrier, zone de sélection déroulante. FormControl enregistre la valeur actuelle de l'élément HTML qui lui est associé, le statut de validation de l'élément et des informations telles que si l'élément a été modifié.

FormArray

FormArray est similaire à FormGroup, mais il a une propriété de longueur. De manière générale, FormGroup est utilisé pour représenter l'intégralité du formulaire ou un sous-ensemble fixe de champs de formulaire ; FormArray est généralement utilisé pour représenter un ensemble de champs pouvant s'agrandir.

Validation de formulaire

Validateurs intégrés angulaires

Angular nous fournit plusieurs validateurs intégrés, les suivants sont les validateurs les plus couramment utilisés :

• Validators.required - la valeur du contrôle du formulaire n'est pas vide
• Validators.email - le format de la valeur du contrôle du formulaire est email
• Validateurs .minLength() - la longueur minimale de la valeur de contrôle du formulaire
• Validators.maxLength() - la longueur maximale de la valeur de contrôle du formulaire
• Validators.pattern() - la valeur du formulaire le contrôle doit correspondre au modèle correspondant au modèle (expression régulière)

Validateur de formulaire réactif personnalisé

En développement réel, afin de répondre aux besoins du projet , nous avons besoin de personnaliser certains validateurs. De manière générale, la fonction de vérification peut être définie sous la forme suivante :

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    
      // TODO 编写校验规则   
      return null;  
 }

Ce qui suit prend comme exemple une page d'inscription commune :

Formulaire d'initialisation

ngOnInit(): void {  
     this.formModel = this.fb.group({    
	username: ['', [Validators.required, Validators.minLength(6)]],    
	// 密码    
	passwordsGroup: this.fb.group({     
	       password: [''],  
	       passwordConfirm: [''] 
	       }, { validator: this.equalValidator }),    
        // 手机号    
        mobile: ['', this.moblieValidator]  });
 }

Écrire un validateur

// 手机号码校验
moblieValidator(control: AbstractControl): any {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校验结果：', valid); 
   return valid ? null : { mobile: true };
}

// 密码校验
equalValidator(group: FormGroup): any {  
   const password = group.get('password') as FormControl;  
   const passwordConfirm = group.get('passwordConfirm') as FormControl;  
   const valid = password.value === passwordConfirm.value;  
   console.log('密码校验结果', valid);  
   return valid ? null : { equal: true };
}

Validateur asynchrone angulaire

L'API de formulaire Angular prend également en charge les validateurs asynchrones, les validateurs asynchrones Les services à distance peuvent être appelé pour vérifier les valeurs des champs du formulaire. Le validateur asynchrone est similaire au validateur ordinaire et est également une méthode. La seule différence est que le validateur asynchrone ne renvoie pas un objet mais un flux observable.

moblieAsyncValidator(control: AbstractControl): Observable<any> {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log(&#39;mobile的校验结果：&#39;, valid); 
   return of(valid ? null : { mobile: true }); 
 }

Champs d'état angulaires

• touchés et intacts

Ces deux champs indiquent si l'utilisateur a accédé au champ, c'est-à-dire si ce champ a reçu le focus. Généralement utilisé pour déterminer si les messages d'erreur du formulaire sont affichés. En même temps, si un champ est touché, l'attribut touché de l'ensemble du formulaire est vrai ; seulement lorsque tous les champs ne sont pas touchés, l'attribut intact de l'ensemble du formulaire est vrai ;

• pristine 和 dirty

如果一个字段的值从来没有改变过， 那么它的 pristine 就是 true， dirty 就是 false； 反之， 如果字段的值被修改过， 那么它的pristine 就是 false， dirty 就是 true。 同时， 如果任何一个字段是 dirty， 那么整个表单的 dirty 属性就是 true； 只有所有字段是 pristine 时， 整个表单的 pristine 属性才是 true。

• pending

当一个字段处于异步校验时， 该字段的 pending 属性是 true。

自定义模板式表单的校验器

在Plongez en profondeur dans les formulaires dans Angular里， 我们后台有一个编码的数据模型， 只需要将校验器的方法挂在指定字段属性上就可以了。 但是， 在模板式表单里， 后台是没有这类数据模型的， 指令才是唯一能用的东西， 所以我们需要将校验方法包装成指令， 然后才能在模板中使用它。

编写指令

@Directive({  
   selector: '[mobile]', 
    providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})
 export class MobileValidatorDirective {  
    constructor() { }
 }
 
// html中引用
<div>  手机号:<input ngModel type="number" name="mobile" mobile required></div>

mutli: true ：指的是在 NG_VALIDATORS 这个 Token 下可以挂不同 useValue 属性所表示的值。

注意: 在模板式表单中， 是不可以在模板中使用字段的状态属性的。 模板式表单与Plongez en profondeur dans les formulaires dans Angular不同， 它的模型的值和它状态的变更是异步的， 而且很难控制。
如果想要使用字段的状态属性，我们可以进行如下操作：

// .html文件中
<div>  
   用户名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
</div>
<div [hidden]="usernameValid || usernameUntouched">  
    <div [hidden]="!myForm.form.hasError(&#39;required&#39;, &#39;username&#39;)">
      用户名是必填项！
    </div>  
    <div [hidden]="!myForm.form.hasError(&#39;minlength&#39;, &#39;username&#39;)">
      用户名长度至少是6位！
    </div>
</div>
// .ts文件中
usernameValid = true; 
usernameUntouched = true; 
onUsernameInput(form: NgForm): void {  
   if (form) {
      this.usernameValid = form.form.get(&#39;username&#39;).valid;    
      console.log(&#39;valid&#39;, this.usernameValid);          
      this.usernameUntouched = form.form.get(&#39;username&#39;).untouched;   
      console.log(&#39;untouched&#39;,   this.usernameUntouched);
    }
}

小结: 在使用字段的状态属性时， Plongez en profondeur dans les formulaires dans Angular比模板式表单更方便，可以节省很多代码，而且比较可控。所以模板式表单适合用于一些简单的场景。

更多编程相关知识，请访问：编程视频！！

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!