ng2-Validierungslernen von Angular2

<p>Seit kurzem verwende ich ng2 als Frontend. Ich habe festgestellt, dass zusätzlich zu den Beispielen auf der offiziellen Website zur Formularüberprüfung eine Überprüfung erforderlich ist. Alles andere muss durch das Schreiben einer eigenen Logik implementiert werden. Es ist nicht sehr bequem zu entwickeln. Also habe ich im Internet nach Ressourcen zur ng2-Formularvalidierung gesucht und festgestellt, dass ng2-validation gut ist. Das gilt auch für die Beispiele. Für die zukünftige Verwendung, aber auch Angst, dass es nach langer Zeit vergessen wird. </p> <p>Beispielcode-Link</p> <ul class=" list-paddingleft-2"><li><p>Zuerst vom npm-Paketverwaltungsserver herunterladen und installieren. </p></li></ul> <pre class="brush:php;toolbar:false">npm install ng2-validation --save 命令参数--save：使npm包信息保存在package.json文件的dependencies配置集合内。该集合是ng2正式运行的依赖集合。</pre> <ul class=" list-paddingleft-2"><li><p>Verwendung </p></li></ul> <p>Fügen Sie eine Referenz in der Moduldatei hinzu, normalerweise AppModule. </p> <p>app.module.ts-Datei</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"><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> <span class="cnblogs_code_collapse">Code anzeigen</span> </div> <p> </p> <div> <div> <p>Es gibt zwei Möglichkeiten, die Formularvalidierung zu verwenden. Sie können flexibel wählen. Ich habe die Vermischung der beiden nicht untersucht. Tatsächlich reicht es aus, eines zu verwenden. </p> <p>Vorlagengesteuert<span style="font-size: 12px;">（</span><span style="font-size: 12px;">Vorlagengesteuert</span><span style="font-size: 12px;">)</span></p> <p><span style="font-size: 12px;">Beispiel auf GitHub</span></p> <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> <div>Modellgesteuert</div> <div>Beispiel auf GitHub</div> <div> <pre class="brush:php;toolbar:false"><</pre><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>　<form<span style="color: #0000ff;"> [formGroup]="formGroup" </span> ( ngSubmit)="onSubmit()" #validationForm2="ngForm" ></div> <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="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"><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> <span class="cnblogs_code_collapse">Code anzeigen</span> </div> <p> </p> <pre class="brush:php;toolbar:false"> <br></pre> <p>ts-Datei muss nichts tun, daher werde ich sie nicht veröffentlichen. </p> <p>Modellgesteuert<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"><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> <span class="cnblogs_code_collapse">Code anzeigen</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"><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> <span class="cnblogs_code_collapse">Code anzeigen</span> </div> <p> </p> <pre class="brush:php;toolbar:false"> <br></pre> <pre class="brush:php;toolbar:false"> <br></pre> </div> </div> <p> </p> <p> </p> <div> </div>

Das obige ist der detaillierte Inhalt vonng2-Validierungslernen von Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!