Validation 如何在angular 6表单控件验证器中一次仅显示一个验证

我正在使用表单控件在material angular 6应用程序中应用验证

以下是验证器的代码：-

paymentOffBankName: new FormControl('', Validators.compose([
Validators.required,
Validators.maxLength(this.responseMap.get('ev_payment_t.bank_name').values.maxSize),
Validators.minLength(this.responseMap.get('ev_payment_t.bank_name').values.minSize),
Validators.pattern(this.responseMap.get('ev_payment_t.bank_name').values.validationExp)

])),

paymentOffBankName': [
{ type: 'required', message: 'Required') },
{ type: 'pattern', message: 'Invalid Name' },
{ type: 'minlength', message: 'Requires atleast 3 letters'
},

],

我有一种方法可以显示与消息相关的验证器：-

paymentOffBankName: new FormControl('', Validators.compose([
Validators.required,
Validators.maxLength(this.responseMap.get('ev_payment_t.bank_name').values.maxSize),
Validators.minLength(this.responseMap.get('ev_payment_t.bank_name').values.minSize),
Validators.pattern(this.responseMap.get('ev_payment_t.bank_name').values.validationExp)

])),

paymentOffBankName': [
{ type: 'required', message: 'Required') },
{ type: 'pattern', message: 'Invalid Name' },
{ type: 'minlength', message: 'Requires atleast 3 letters'
},

],

这是我的html，它显示了错误：-

<mat-form-field fxFlex="{{responseMap.get('ev_payment_t.bank_name').values.maxSize}}">
<input required matInput placeholder="{{responseMap.get('ev_payment_t.bank_name').values.label}}"
formControlName="paymentOffBankName" maxlength="{{responseMap.get('ev_payment_t.bank_name').values.maxSize}}">
<mat-error *ngFor="let validation of validationMessages.paymentOffBankName">
<mat-error class="error-message" *ngIf="offlinePaymentService.OfflinePayment_form.get('paymentOffBankName').hasError(validation.type) && (offlinePaymentService.OfflinePayment_form.get('paymentOffBankName').dirty || offlinePaymentService.OfflinePayment_form.get('paymentOffBankName').touched)">{{validation.message}}</mat-error>
</mat-error>
</mat-form-field>

{{validation.message}

我的问题是，如果我用两个字母输入了无效名称，那么它将显示两条验证消息

---

期望：它应该只显示一条消息，我将放置一条常见消息，如“Required，MinLengh-3，Alpha-Numeric only”

要一次只显示一条验证消息，请尝试使用

messageKey

，您可以在其中传递

composeMessageKey

，其中包含该字段的所有验证消息

在应用程序组件中声明

composeMessageKey

export class AppComponent implements OnInit {

  ngOnInit(){
    ReactiveFormConfig.set({"validationMessage":{
      "composeMessageKey":"please enter valid input"
      }});
  }
} 

在组件ts中：

  ngOnInit() {
    this.userFormGroup = this.formBuilder.group({
      paymentOffBankName:['', RxwebValidators.compose(
        {validators:[
          RxwebValidators.alpha(),
          RxwebValidators.maxLength({value:3}),
          RxwebValidators.minLength({value:4}),

          ],messageKey:"composeMessageKey",
        })         
      ]
  });

}

为此，我使用了@rxweb验证器（RxwebValidators）的验证器并传递了MessageKey

Html:

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Payment Off BankName</label>
      <input type="text" formControlName="paymentOffBankName" class="form-control"  />
    </div>
      <small class="form-text text-danger" *ngIf="userFormGroup.controls.paymentOffBankName.errors">{{userFormGroup.controls.paymentOffBankName.errors.composeMessageKey?.message}}<br/></small>    
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

银行名称付款
{{userFormGroup.controls.paymentOffBankName.errors.composeMessageKey？.message}}

提交

---

下面是stackblitz示例：

若要一次只显示一条验证消息，请尝试使用

messageKey

，您可以在其中传递包含该字段所有验证消息的

composeMessageKey

在应用程序组件中声明

composeMessageKey

export class AppComponent implements OnInit {

  ngOnInit(){
    ReactiveFormConfig.set({"validationMessage":{
      "composeMessageKey":"please enter valid input"
      }});
  }
} 

在组件ts中：

  ngOnInit() {
    this.userFormGroup = this.formBuilder.group({
      paymentOffBankName:['', RxwebValidators.compose(
        {validators:[
          RxwebValidators.alpha(),
          RxwebValidators.maxLength({value:3}),
          RxwebValidators.minLength({value:4}),

          ],messageKey:"composeMessageKey",
        })         
      ]
  });

}

为此，我使用了@rxweb验证器（RxwebValidators）的验证器并传递了MessageKey

Html:

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Payment Off BankName</label>
      <input type="text" formControlName="paymentOffBankName" class="form-control"  />
    </div>
      <small class="form-text text-danger" *ngIf="userFormGroup.controls.paymentOffBankName.errors">{{userFormGroup.controls.paymentOffBankName.errors.composeMessageKey?.message}}<br/></small>    
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

银行名称付款
{{userFormGroup.controls.paymentOffBankName.errors.composeMessageKey？.message}}

提交

以下是stackblitz示例：