apprentissage de validation ng2 d'angular2

<p>Récemment, j'utilise ng2 comme frontal. J'ai constaté qu'en plus des exemples donnés sur le site officiel pour la vérification du formulaire, une vérification est requise. Tout le reste doit être mis en œuvre en écrivant votre propre logique. Ce n'est pas très pratique à développer. J'ai donc recherché des ressources de validation de formulaire ng2 sur Internet et j'ai trouvé que la validation ng2 était bonne. Les exemples aussi. Pour une utilisation future, mais aussi peur qu'il soit oublié après une longue période. </p> <p>Exemple de lien de code</p> <ul class=" list-paddingleft-2"><li><p>Téléchargez et installez d'abord à partir du serveur de gestion de packages npm. </p></li></ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm install ng2-validation --save 命令参数--save：使npm包信息保存在package.json文件的dependencies配置集合内。该集合是ng2正式运行的依赖集合。</pre><div class="contentsignin">Copier après la connexion</div></div> <ul class=" list-paddingleft-2"><li><p>Utilisation </p></li></ul> <p>Ajoutez une référence dans le fichier du module, généralement AppModule. </p> <p>fichier app.module.ts</p> <div class="cnblogs_code"> <img id="code_img_closed_e7fcb3a6-23ed-4046-a3f8-f1a29d22220f" class="code_img_closed" src="https://img.php.cn/upload/article/000/000/001/67b3c157e379ac2f5c6a34f8763b2aec-0.gif" alt=""><img id="code_img_opened_e7fcb3a6-23ed-4046-a3f8-f1a29d22220f" class="code_img_opened" src="https://img.php.cn/upload/article/000/000/001/67b3c157e379ac2f5c6a34f8763b2aec-1.gif" alt=""><div class="cnblogs_code_hide"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule,ReactiveFormsModule }   from '@angular/forms';import { CustomFormsModule } from 'ng2-validation';import { AppComponent } from './app.component';import { AppTtemplateDrivenComponent } from './app-ttemplate-driven/app-ttemplate-driven.component';import { AppModelDrivenComponent } from './app-model-driven/app-model-driven.component';import { AppRoutingModule } from "app/app-routes.module";import { ValidationConfigModel } from "app/Models/validation"; @NgModule({   declarations: [     AppComponent,     AppTtemplateDrivenComponent,     AppModelDrivenComponent   ],   imports: [     BrowserModule,     FormsModule,     AppRoutingModule,     CustomFormsModule,     ReactiveFormsModule   ],   providers: [ValidationConfigModel],   bootstrap: [AppComponent] }) export class AppModule { }</pre><div class="contentsignin">Copier après la connexion</div></div></div> <span class="cnblogs_code_collapse">Afficher le code</span> </div> <p> </p> <div> <div> <p>Il existe deux manières d'utiliser la validation de formulaire. Vous pouvez choisir de manière flexible. Je n'ai pas étudié le mélange des deux. En fait, en utiliser un suffit. </p> <p>piloté par un modèle<span style="font-size: 12px;">（</span><span style="font-size: 12px;">piloté par un modèle</span><span style="font-size: 12px;">)</span></p> <p><span style="font-size: 12px;">Exemple sur GitHub</span></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]"/> <p *ngIf="field.errors?.rangeLength">error message</p></pre><div class="contentsignin">Copier après la connexion</div></div> </div> <div>Piloté par modèle</div> <div>Exemple sur GitHub</div> <div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><</pre><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span class="pl-ent"><span class="pl-e"><span class="pl-s"><span class="pl-pds"><span class="pl-pds"><span class="pl-e"><span class="pl-s"><span class="pl-pds"><span class="pl-pds"><<span class="pl-ent">p <span style="color: #0000ff;">*</span><span class="pl-e"><span style="color: #0000ff;">ngIf=</span><span class="pl-s"><span class="pl-pds"><span style="color: #0000ff;">"demoForm.from.controls.field.errors?.rangeLength</span><span class="pl-pds"><span style="color: #0000ff;">"</span>>error message</<span class="pl-ent">p><br><span class="pl-k"><span class="pl-k"><span class="pl-en"><span class="pl-k">FormGroup需要在from的dom上添加formGroup驱动，否则验证不生效。<br></span></span></span></span></pre><div class="contentsignin">Copier après la connexion</div></div> <div>　<form<span style="color: #0000ff;"> [formGroup]="formGroup" </span> ( ngSubmit)="onSubmit()" #validationForm2="ngForm" ></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span class="pl-k"><span class="pl-k"><span class="pl-en"><span class="pl-k"> 下面是我的demo代码片段：<br>模板驱动app-ttemplate-driven.component.html<br></span></span></span></span></pre><div class="contentsignin">Copier après la connexion</div></div> <div class="cnblogs_code"> <img id="code_img_closed_eb3df7ae-530b-42cb-b181-36930644c712" class="code_img_closed" src="https://img.php.cn/upload/article/000/000/001/67b3c157e379ac2f5c6a34f8763b2aec-2.gif" alt=""><img id="code_img_opened_eb3df7ae-530b-42cb-b181-36930644c712" class="code_img_opened" src="https://img.php.cn/upload/article/000/000/001/67b3c157e379ac2f5c6a34f8763b2aec-3.gif" alt=""><div class="cnblogs_code_hide"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div class="container">   <form (ngSubmit)="onSubmit()" #validationForm="ngForm">     <div class="form-group">       <label for="appField">长度要求</label>       <input type="text" required class="form-control" name="appField" [(ngModel)]="model.appField" #rangeLength="ngModel" [rangeLength]="[5, 9]">       <p [hidden]="rangeLength.valid||rangeLength.pristine">长度在5到9之间</p>     </div>     <div class="form-group">       <label for="appField2">长度要求2</label>       <input type="text" class="form-control" name="appField2" [(ngModel)]="model.appField2" #rangeLength2="ngModel" [rangeLength]="[0,5]">       <p [hidden]="rangeLength2.valid||rangeLength2.pristine">长度要求</p>     </div>     <div class="form-group">       <label for="appMin">最小值</label>       <input type="number" class="form-control" name="appMin" [(ngModel)]="model.appMin" #appMin="ngModel" [min]="10" />      <p [hidden]="appMin.valid||appMin.pristine">取值大于等于10</p>     </div>    <div class="form-group">      <label for="appGt">大于</label>      <input type="number" class="form-control" name="appGt" [(ngModel)]="model.appGt" #appGt="ngModel" [gt]="10" />      <p [hidden]="appGt.valid||appGt.pristine">取值大于10</p>    </div>    <div class="form-group">      <label for="appGte">大于等于</label>      <input type="number" class="form-control" name="appGte" [(ngModel)]="model.appGte" #appGte="ngModel" [gte]="10" />      <p [hidden]="appGte.valid||appGte.pristine">取值大于等于10</p>    </div>    <div class="form-group">      <label for="appMax">最大值</label>      <input type="number" class="form-control" name="appMax" [(ngModel)]="model.appMax" #appMax="ngModel" [max]="10" />      <p [hidden]="appMax.valid||appMax.pristine">最小值10</p>    </div>     <div class="form-group">      <label for="appLt">小于</label>      <input type="number" class="form-control" name="appLt" [(ngModel)]="model.appLt" #appLt="ngModel" [lt]="10" />      <p [hidden]="appLt.valid||appLt.pristine">值小于10</p>    </div>    <div class="form-group">      <label for="appLte">小于等于</label>      <input type="number" class="form-control" name="appLte" [(ngModel)]="model.appLte" #appLte="ngModel" [lte]="10" />      <p [hidden]="appLte.valid||appLte.pristine">值小于等于10</p>    </div>    <div class="form-group">      <label for="appRange">取值范围</label>      <input type="number" class="form-control" name="appRange" [(ngModel)]="model.appRange" #appRange="ngModel" [range]="[10, 20]" />      <p [hidden]="appRange.valid||appRange.pristine">取值大于等于10到小于等于20</p>    </div>    <div class="form-group">      <label for="appDigits">数字</label>      <input type="text" class="form-control" name="appDigits" [(ngModel)]="model.appDigits" #appDigits="ngModel" digits />      <p [hidden]="appDigits.valid||appDigits.pristine">必须是uint</p>    </div>    <div class="form-group">      <label for="appNumber">数字</label>      <input type="text" class="form-control" name="appNumber" [(ngModel)]="model.appNumber" #appNumber="ngModel" number />      <p [hidden]="appNumber.valid||appNumber.pristine">任何数字</p>    </div>    <div class="form-group">      <label for="appUrl">链接</label>      <input type="text" class="form-control" name="appUrl" [(ngModel)]="model.appUrl" #appUrl="ngModel" url />      <p [hidden]="appUrl.valid||appUrl.pristine">合法的url</p>    </div>     <div class="form-group">      <label for="appEmail">邮箱</label>      <input type="text" class="form-control" name="appEmail" [(ngModel)]="model.appEmail" #appEmail="ngModel" email />      <p [hidden]="appEmail.valid||appEmail.pristine">合法的邮箱地址</p>    </div>    <div class="form-group">      <label for="appDate">日期</label>      <input type="text" class="form-control" name="appDate" [(ngModel)]="model.appDate" #appDate="ngModel" date />      <p [hidden]="appDate.valid||appDate.pristine">合法的日期</p>    </div>    <div class="form-group">      <label for="appUuid">uuid</label>      <input type="text" class="form-control" name="appUuid" [(ngModel)]="model.appUuid" #appUuid="ngModel" uuid="'all'" />      <p [hidden]="appUuid.valid||appUuid.pristine">不是合法的uuid</p>    </div>    <div class="form-group">      <label for="appPhone">电话</label>      <input type="text" class="form-control" name="appPhone" [(ngModel)]="model.appPhone" #appPhone="ngModel" phone="CN" />      <p [hidden]="appPhone.valid||appPhone.pristine">不是合法的电话号码</p>    </div>    <div class="form-group">      <label >两次相同</label>      <input class="form-control" type="password" ngModel name="appPassword" #appPassword="ngModel" required/>      <p [hidden]="appPassword.valid||appPassword.pristine">必填项</p>      <input class="form-control" type="password" ngModel name="appCertainPassword" #appCertainPassword="ngModel" [equalTo]="appPassword"/>      <p [hidden]="appCertainPassword.valid||appCertainPassword.pristine">两次输入不一致</p>    </div>    <div class="form-group">      <label for="appEqual">相同</label>      <input type="text" class="form-control" name="appEqual" [(ngModel)]="model.appEqual" #appEqual="ngModel" [equal]="'哈哈'" />      <p [hidden]="appEqual.valid||appEqual.pristine">与值不相符</p>    </div>     <div class="form-group">      <label for="appComplex">复合条件</label>      <input type="number" class="form-control" name="appComplex" [(ngModel)]="model.appComplex" #appComplex="ngModel" [gte]="5" [max]="10" />      <p [hidden]="appComplex.valid||appComplex.pristine">大于等于5，最大是10</p>    </div>     <button type="submit" [disabled]="!validationForm.form.valid" class="btn btn-default">Submit</button>   </form> </div></pre><div class="contentsignin">Copier après la connexion</div></div></div> <span class="cnblogs_code_collapse">Afficher le code</span> </div> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <br></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p>ts fichier n'a rien à faire, donc je ne le publierai pas. </p> <p>Piloté par modèle<br>app-model-driven.component.ts</p> <div class="cnblogs_code"> <img id="code_img_closed_33ac0536-ba8b-43bc-b9ca-085c96fef74a" class="code_img_closed" src="https://img.php.cn/upload/article/000/000/001/762fd55d42b9b4a0f5787e5afdc09e25-4.gif" alt=""><img id="code_img_opened_33ac0536-ba8b-43bc-b9ca-085c96fef74a" class="code_img_opened" src="https://img.php.cn/upload/article/000/000/001/762fd55d42b9b4a0f5787e5afdc09e25-5.gif" alt=""><div class="cnblogs_code_hide"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { Component, OnInit } from '@angular/core';import { FormGroup, FormControl, Validators } from "@angular/forms";import { CustomValidators } from 'ng2-validation'; @Component({   selector: 'app-app-model-driven',   templateUrl: './app-model-driven.component.html',   styleUrls: ['./app-model-driven.component.css'] }) export class AppModelDrivenComponent implements OnInit {public formGroup: FormGroup; password:string="";   constructor() {      let password = new FormControl('', [Validators.required]);   let certainPassword = new FormControl('', CustomValidators.equalTo(password));this.formGroup = new FormGroup({             field: new FormControl('',  CustomValidators.rangeLength([5, 9])),             appGt:new FormControl('', CustomValidators.gt(10)),             password:password,             certainPassword:certainPassword,             maxField:new FormControl('',[CustomValidators.gt(10),CustomValidators.max(20)])         });   }   ngOnInit() {   } onSubmit(){} }</pre><div class="contentsignin">Copier après la connexion</div></div></div> <span class="cnblogs_code_collapse">Afficher le code</span> </div> <p>app-model-driven.component.html</p> <div class="cnblogs_code"> <img id="code_img_closed_c88f6dec-3c23-45e4-b7de-6a61f7c64f3b" class="code_img_closed" src="https://img.php.cn/upload/article/000/000/001/762fd55d42b9b4a0f5787e5afdc09e25-6.gif" alt=""><img id="code_img_opened_c88f6dec-3c23-45e4-b7de-6a61f7c64f3b" class="code_img_opened" src="https://img.php.cn/upload/article/000/000/001/762fd55d42b9b4a0f5787e5afdc09e25-7.gif" alt=""><div class="cnblogs_code_hide"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div class="container">   <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #validationForm2="ngForm" >     <div class="form-group" >       <input class="form-control" name="field" type="text" formControlName="field"/>       <p *ngIf="validationForm2.form.controls.field.errors?.rangeLength">长度在5到9之间</p>       <p>{{validationForm2.form.controls.field.errors?.rangeLength}}</p>     </div>    <div class="form-group" >       <input class="form-control" name="appGt" type="number" formControlName="appGt"/>       <p *ngIf="validationForm2.form.controls.appGt.errors?.gt">大于10</p>     </div>     <div class="form-group" >       <input class="form-control" name="password" type="password" [(ngModel)]="password" formControlName="password"/>       <p *ngIf="validationForm2.form.controls.password.errors?.required">必填</p>       <p>{{test.pristine}}</p>       <input class="form-control" type="password" formControlName="certainPassword"/>       <p *ngIf="validationForm2.form.controls.certainPassword.errors?.equalTo">两次相同</p>     </div>     <div class="form-group" >       <label for="appMin">组合形式</label>       <input type="number" class="form-control" name="appMin" formControlName="maxField" />      <p [hidden]="!validationForm2.form.controls.maxField.errors?.max &&!validationForm2.form.controls.maxField.errors?.gt">取值大于等于10且小于20</p>     </div>     <button type="submit" [disabled]="!validationForm2.form.valid" class="btn btn-default">Submit</button>   </form> </div></pre><div class="contentsignin">Copier après la connexion</div></div></div> <span class="cnblogs_code_collapse">Afficher le code</span> </div> <p> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <br></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <br></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> </div> </div> <p> </p> <p> </p> <div> </div>

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!