代码之家 › 专栏 › 技术社区 › Bhrungarajni

如何在priming中使用angular2验证输入字段

primeng angular

Bhrungarajni · 技术社区 · 7 年前

HTML格式:

<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>

TS码:

this.conditionForm = this._FB.group({
 name: ['', Validators.required],
      });

1 回复 | 直到 7 年前

Hitesh Kansagara 7 年前

你需要改变下面的模式,

<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, "");
      }
  }

推荐文章

Asaf Abekasis · 如何在css中检查p-drop prime ng是否已选择值

1 年前