带有验证的角度2,4,5+输入掩码 [英] Angular 2,4,5+ Input Mask with Validation
问题描述
如何在Angular模板驱动的方法中验证和显示验证消息?
How to Validate and show validation message in Angular Template driven aproach?
推荐答案
步骤1:通过命令从npm下载 TextMask 指令
npm i angular2-text-mask --save
.
step1: Download TextMask directive from npm by command
npm i angular2-text-mask --save
.
步骤2::将下载的指令导入并声明到您的组件文件中,或在一个公共模块中声明,该指令可与所有项目组件共享.
step2: Import and declare the downloaded directive to your component file or in a common module where this directive can be shared with all the project components.
第3步::在component.ts文件中,将掩码图案写为数组. 例如:
step3: In the component.ts file write the mask pattern as an array. For example:
public mobileNumberMask = ['(', /[0-9]/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
示例:掩码值(123)456-7890 .
步骤4::在元素中添加指令属性,例如like, 例如:
Step 4: In the element add the directive attribute such as like, example:
<div class="col-sm-8">
<input type="text" id="mobileNumber"
class="form-control" name="mobileNumber"
[ngClass]="{'errorMsg': ((mobileNumber.dirty || this.formOnSubmit) &&
mobileNumber.invalid)}"
[textMask]="{mask: mobileNumberMask, guide: true}"
pattern="\(\d{3}\)\d{3}\-\d{4}"
[(ngModel)]="person.mobileNumber" placeholder="Enter mobile no"
#mobileNumber="ngModel"
required >
<div [ngClass]="{'errorMessage':!((mobileNumber.dirty || formOnSubmit) &&
mobileNumber.invalid)}" >
<span class="customMsg">{{'mobile number is required'}}</span>
</div>
</div>
这篇关于带有验证的角度2,4,5+输入掩码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!