Пользовательская директива для отображения встроенных и пользовательских ошибок по одному - PullRequest
Новая
       16

Пользовательская директива для отображения встроенных и пользовательских ошибок по одному

0 голосов
/ 25 января 2019

Мне нужно сравнить, совпадает ли сначала введенный текст со встроенными ошибками, такими как требуемый, minlength, maxlength, pattern, а затем проверить, удовлетворяет ли ввод и мое пользовательское состояние.

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

Так что мне нужно написать общую директиву, которая может отображать:
1) Все встроенные ошибки также, а затем отображать наши собственные ошибки.
2) Отображать только одну ошибку за раз
3) Первый приоритет должен быть предоставлен для встроенных ошибок, таких как требуемые, шаблон и т. Д., А затем наше пользовательское условие должно быть проверено.

HTML-код 

<form name="checkForm" #checkForm="ngForm">
    <label>Check Code :<br>
        <input type="text" name="checkFiled" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
            [(ngModel)]="checkNgFiled" #checkFiled="ngModel" autocomplete="off"
            [MatchInput]="checkVar">
    </label><br>
        <div *ngIf="(checkFiled.touched || checkFiled.dirty) && checkFiled.invalid"
            class="ErrCls">
            <span *ngIf="checkFiled.errors.required">Input is Empty.</span>
            <span *ngIf="checkFiled.errors.pattern">Code is weak</span>
            <span *ngIf="checkFiled.errors.unMatchError">Input do not match</span><br>
        </div>

    <button [disabled]="!checkForm.valid">Check</button>
</form>

Код TS 

import { Directive, Input } from '@angular/core';
import { AbstractControl, Validator, NG_VALIDATORS, ValidationErrors } from '@angular/forms';

@Directive({
    selector: '[MatchInput]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: MatchInputCls, multi: true }
      ]
})
export class MatchInputCls implements Validator
{
    @Input() MatchInput: string;

    validate(inputControl: AbstractControl): ValidationErrors | null
    {

// Need a proper condition to first check for inbuilt errors, It its present my code should return null, 

        if(!inputControl.errors || (inputControl.errors && 
            Object.keys(inputControl.errors).length == 1 &&
            inputControl.errors.unMatchError ))
        {
            if(inputControl.value != this.MatchInput)
            {
                return { unMatchError: true };
            }
        }
        console.log("OutSide", inputControl.errors)
        return null;
    }
}

1 Ответ

0 голосов
/ 25 января 2019

Вы можете иметь customValidator, как 

customValidator(params: any) {
    return (control: AbstractControl) => {
      ..your logic here..
      if (error)
        return { "customError": "Error in a function in component: The value is " + params }
      else
      {
          if (control.errors)
          {
              if (control.errors.required)
                  return { "customError": "Error required"}

              if (control.errors.pattern)
                  return { "customError": "Error pattern"}
              ...
          }
      }

      return null;
    }
  }

Тогда вы спрашиваете только о вашей пользовательской ошибке 

<span *ngIf="checkFiled.errors?.customError">
     {{checkFiled.errors?.customError}}
</span>

ПРИМЕЧАНИЕ. Требуются ошибки, например, может быть правдой, но вы ничего не делаете с этим

...