Как показать только одну проверку за один раз в угловых 6 валидаторах контроля формы - PullRequest
Новая
       26

Как показать только одну проверку за один раз в угловых 6 валидаторах контроля формы

0 голосов
/ 11 февраля 2019

Я использую управление формой для применения проверки в приложении углового материала 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'
},

],

Вот мой 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>

Моя проблема в том, что если я поставил недопустимое имя с двумя буквами, то он показывает два сообщения проверки.

Ожидание: на нем должно отображаться только одно сообщение. Я добавлю одно общее сообщение типа «Обязательно, MinLengh-3, Alpha Numeric only» *

1 Ответ

0 голосов
/ 12 февраля 2019

Чтобы показать только одно сообщение проверки за раз, попробуйте использовать 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>

Вот пример стекаблиц: Stackblitz

...