Question

所以我试图根据我的表单控件上的验证器显示不同的验证消息。

这是我到目前为止所建立的：

this.Form = fb.group ({
      'FooNumber': [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9\\-_]*$')])]
    });

在我的HTML中：

<input formControlName="FooNumber" (blur)="NoSpecialCharacters && !this.Form.get('FooNumber').valid" [ngClass]="!this.Form.get('FooNumber').valid ? 'inputRed': 'input'"/>

<div class="error-msg" *ngIf="!this.Form.get('FooNumber').valid" name="errorMsg"> This is a required field </div>

<div class="error-msg" *ngIf="NoSpecialCharacters && !this.Form.get('FooNumber').valid" name="errorMsg">Enter a valid number </div>

我的问题是，我想在上面的Validators.pattern（）中为正则表达式显示带有ngIf“NoSpecialCharacters”的消息，但如果该字段感觉为空并且用户点击提交，则应显示另一条消息，“必填字段“消息。

我想知道，根据哪个验证器关闭，显示不同错误消息的最佳方法是什么。

我是否需要创建自定义验证程序来处理此方案？

Answer 1

尝试此操作以改进验证

如果您使用ReactiveForms，请始终将验证控件保留在后端。

<强> component.ts

<h3>Add Form</h3>
<p *ngIf="isValidFormSubmitted && Form.pristine" [ngClass] = "'success'">
    Form submitted successfully.
</p>
<form [formGroup]="Form" (ngSubmit)="onFormSubmit()">
 <table>
  <tr> 
    <td>User Name: </td>
    <td> 
        <input formControlName="FooNumber">
        <div *ngIf="FooNumber.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
            <div *ngIf="FooNumber.errors.required">
                This is a required field.
            </div>  
            <div *ngIf="FooNumber.errors.pattern">
                Enter a valid number.
            </div> 
        </div>
    </td>
  </tr> 
  <tr>    
    <td colspan="2">
        <button>Submit</button>
    </td>
  </tr>    
 </table>  
</form>

<强> component.html

next()

Demo

我希望这可以帮助您改进表单验证。如果您有任何问题或疑问，请告诉我。

使用多个验证器和不同的验证器消息

1 个答案: