<p>최근에는 ng2를 프런트 엔드로 사용하고 있습니다. 양식 확인을 위해 공식 웹 사이트에 제공된 예 외에도 확인이 필요하다는 것을 알았습니다. 다른 모든 것은 자신만의 논리를 작성하여 구현해야 합니다. 개발하기가 그리 편리하지 않습니다. 그래서 인터넷에서 ng2 form 유효성 검사 리소스를 검색해 본 결과 ng2-validation이 좋다는 것을 알았습니다. 예제도 마찬가지입니다. 나중에 사용하기 위해서지만, 시간이 지나면 잊혀질까 두렵기도 합니다. </p>
<p>샘플 코드 링크</p>
<ul class=" list-paddingleft-2"><li><p>먼저 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">로그인 후 복사</div></div>
<ul class=" list-paddingleft-2"><li><p>사용 방법 </p></li></ul>
<p>모듈 파일(일반적으로 AppModule)에 참조를 추가합니다. </p>
<p>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">로그인 후 복사</div></div></div>
<span class="cnblogs_code_collapse">코드 보기</span>
</div>
<p> </p>
<div>
<div><p>양식 확인을 사용하는 방법에는 두 가지가 있습니다. 유연하게 선택할 수 있습니다. 나는 둘의 혼합을 연구하지 않았습니다. 사실 하나만 사용해도 충분합니다. <form </p>[formGroup]="formGroup "<p> (ngSubmit)="onSubmit()" #validationForm2="ngForm" ><span style="font-size: 12px;"><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">로그인 후 복사</div></div></span><span style="font-size: 12px;"></span><span style="font-size: 12px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><</pre><div class="contentsignin">로그인 후 복사</div></div></span></p>코드 보기<p><span style="font-size: 12px;"></span></p><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></pre><div class="contentsignin">로그인 후 복사</div></div></span><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></p></div>ts 파일은 그렇지 않습니다 꼭 해야 할 일이 있어서 게시하지 않겠습니다. <div></div>모델 구동<div>app-model-driven.comComponent.ts</div>
<div>
<div>
<span style="color: #0000ff;"></span><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">로그인 후 복사</div></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">app-model-driven.comComponent.html</div>
<span class="cnblogs_code_collapse"></span>
</div>
<p></p>
<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">로그인 후 복사</div></div>
<p>코드 보기</p> <p><br> 으르르르르르르르</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>
<span class="cnblogs_code_collapse"></span>
</div>
</div>
</div>
위 내용은 Angle2의 ng2 검증 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
