Question

如何在Angular Template驱动的aproach中验证并显示验证消息？

Answer 1

第1步：通过命令从npm下载 TextMask 指令 npm i angular2-text-mask --save。

step2：将下载的指令导入并声明到组件文件或公共模块中，该模块可以与所有项目组件共享此指令。

step3：在component.ts文件中将掩码模式写为数组。例如：

public mobileNumberMask = ['(', /[0-9]/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

示例：屏蔽值（123）456-7890 。

第4步：在元素中添加指令属性，如like，例如：

<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+输入掩模

1 个答案: