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

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" 的消息，但是如果感觉该字段是空的并且用户点击了提交，它应该显示另一条消息，"Required field" 消息。

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

我是否需要创建自定义验证器来处理这种情况？

Answer 1

试试这个来改进您的验证

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

component.ts

  unamePattern = "^(?=.*[a-z]).{2}[a-zA-Z0-9\-_]*$";

  isValidFormSubmitted = null;

  Form = this.formBuilder.group({
    FooNumber: ['', [Validators.required, Validators.pattern(this.unamePattern)]]
  });

  constructor(private formBuilder: FormBuilder) {

  }

  onFormSubmit() {
     this.isValidFormSubmitted = false;
     if (this.Form.invalid) {
        return;
     }
     this.isValidFormSubmitted = true;
     this.Form.reset();
  }

  get FooNumber() {
     return this.Form.get('FooNumber');
  }

component.html

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

Demo

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

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

Using multiple validators and different validator messages

angular-validation

angular

angular-reactive-forms