Как предотвратить отображение нескольких сообщений об ошибках в угловых HTML? - PullRequest
Новая
       9

Как предотвратить отображение нескольких сообщений об ошибках в угловых HTML?

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

Привет, ниже приведен фрагмент кода в моем угловом HTML-файле.Я пытаюсь реализовать if elseif (условие) elseif (условие), используя ngif и ng-container.

То, чего я хочу добиться, - это только один блок кода, который должен напечатать ошибку.Другими словами, я не хочу печатать два сообщения об ошибках.Я не знаю, почему мой код не работает.

Например, в настоящее время, если formGroup.hasError('invalidPasswordStrength') и formGroup.hasError('blacklistedPassword') имеют значение true, выводятся два сообщения об ошибках.

Я ожидаю, что если они оба верны, я хочу напечатать сообщение об ошибке, относящееся к formGroup.hasError('invalidPasswordStrength').

Я пробовал варианты, подобные этой, например:

*ngIf="formGroup.hasError('passwordConfirmation') && !(formGroup.hasError('invalidPasswordStrength') || formGroup.hasError('blacklistedPassword')).

Работает, но не чисто 

<ng-container *ngIf="formGroup.hasError('passwordConfirmation'); else second">
          <alert type="danger" dismissable="false">
            {{ 'VALIDATION.ERRORS.MATCHING_PASSWORDS' | translate }}
          </alert>
        </ng-container>

        <ng-container #second *ngIf="formGroup.hasError('invalidPasswordStrength'); else third">
          <alert type="danger" dismissable="false">
            {{ 'VALIDATION.ERRORS.PASSWORD_STRENGTH_INVALID' | translate }}
          </alert>
        </ng-container>

        <ng-container #third *ngIf="formGroup.hasError('blacklistedPassword'); else fourth">
          <alert type="danger" dismissable="false">
            {{ 'VALIDATION.ERRORS.PASSWORD_NOT_PERMITTED' | translate }}
          </alert>
        </ng-container>

        <ng-container #fourth *ngIf="formGroup.hasError('passwordMatchingUserDetails')">
          <alert type="danger" dismissable="false" >
            {{ 'VALIDATION.ERRORS.PASSWORD_MATCHING_USER_DETAILS' | translate }}
          </alert>
        </ng-container>

Ответы [ 2 ]

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

Почему бы не обработать эту логику в валидаторе.Я бы просто сделал один валидатор и обработал бы все ошибки там, там вы также можете добавить их в нужном вам порядке.Итак, псевдокод: 

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    name: ['']
  }, { validator: this.myValidator});
}

myValidator(form: FormGroup) {
  // begin every time by removing all errors
  if (form) {
    form.setErrors(null);
    if ('some conditions here') {
      return { 'err1': true }
    }
    if ('some conditions here') {
      return { 'err2': true }
    }
    if ('some conditions here') {
      return { 'err3': true }
    }
    return null;
  }
  return null;
}

Затем этот валидатор просто возвращает одну ошибку за раз (если ошибка существует).

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

Удалите ngcontainers и попробуйте использовать этот подход.

вы можете использовать вместо того, что я использовал здесь. 

                      <div
                        *ngIf="aaaServerForm.get('proxy_passphrase').invalid && (aaaServerForm.get('proxy_passphrase').dirty || aaaServerForm.get('proxy_passphrase').touched)">

                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors['required']">Passphrase is required.
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.minlength && !aaaServerForm.get('proxy_passphrase').errors.spaceatstart && !aaaServerForm.get('proxy_passphrase').errors.spaceatend && !aaaServerForm.get('proxy_passphrase').errors.specialatstart && !aaaServerForm.get('proxy_passphrase').errors.specialatend && !aaaServerForm.get('proxy_passphrase').errors.twospace">
                          Minimum 8 character
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.maxlength">
                          Maximum 64 character allowed
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.spaceatstart && !aaaServerForm.get('proxy_passphrase').errors.spaceatend">
                          Should not start with a space!
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.spaceatend && !aaaServerForm.get('proxy_passphrase').errors.spaceatstart">
                          Should not end with a space!
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.spaceatend && aaaServerForm.get('proxy_passphrase').errors.spaceatstart">
                          Should not start & end with a space!
                        </div>
                        <div class="text-danger pull-left" *ngIf="aaaServerForm.get('proxy_passphrase').errors.noTwoSpaces && !aaaServerForm.get('proxy_passphrase').errors.spaceatstart && !aaaServerForm.get('proxy_passphrase').errors.spaceatend">
                          Consecutive spaces not allowed
                        </div>
                      </div>
                    </div>
...