如何在Primeng中使用angular2进行输入字段的验证

时间:2018-10-01 10:14:56

标签: angular primeng

我有一个输入字段,我需要对输入字段进行验证。它只能使用字母。不允许有空格,数字和特殊字符。

HTML:

void wave(){
  un_a();
  delay(2000);
  deux_a();
  delay(2000);
  trois_a();
}

TS:

<div class="col-sm-4 pull-left m-b10 m-t10">
          <label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 text-sm-left no-padd">Name
            <span class="required">*</span>
          </label>
          <div class="col-sm-7 pull-left no-padd">
            <input type="text" formControlName="name" maxlength="50" placeholder="Name" required pattern="^[A-Z\\a-z\\d-_\\s]+$" >
          </div>
        </div>

1 个答案:

答案 0 :(得分:1)

您需要像下面那样更改模式

<input type="text" formControlName="name" maxlength="50" placeholder="Name" required [pattern]="/^[A-Za-z]+$/" >

或者您也可以在组件中进行验证,例如

this.conditionForm = this._FB.group({
 name: ['',[ 
          Validators.required,
          Validators.pattern('/^[A-Za-z]+$/')
       ],
      });

您也可以通过类似的操作来限制输入

<input type="text" formControlName="name" maxlength="50" placeholder="Name" (input)="inputValidator($event)" required />

并在组件中创建此方法

public inputValidator(event: any) {
    const pattern = /^[A-Za-z]+$/;   
    if (!pattern.test(event.target.value)) {
      event.target.value = event.target.value.replace(/[^a-zA-Z]/g, "");
      }
  }