Angular несколько ошибок в валидаторе пользовательских реактивных форм - PullRequest
Новая
       2

Angular несколько ошибок в валидаторе пользовательских реактивных форм

0 голосов
/ 21 января 2020

Я проверяю форму для колл-центра, где обычно поля заполняются в определенном порядке c. Я хочу поднять ошибку для нескольких полей, если пользователь пропускает вперед. Я обнаружил, что работает ниже: 

  export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

    if(!firstField.value && !secondField.Value && !thirdField.value)    
    {
      firstField.setErrors({ "firstFieldError" : true});
      secondField.setErrors({ "secondFieldError" : true});

      return {"firstFieldError" : true, "secondFieldError" : true};

    }
  }

И как firstField, так и secondField показывают ошибки правильно.

Теперь согласно документам ValidationErrors - это просто карта ошибок. Но у него, очевидно, нет никаких методов, поэтому я подумал, что я просто приведу существующую карту к ValidationErrors и верну это: 

  export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

    if(!firstField.value && !secondField.Value && !thirdField.value)    
    {
      firstField.setErrors({ "firstFieldError" : true});
      secondField.setErrors({ "secondFieldError" : true});

      let errorMap = new Map();

      errorMap.set("firstFieldError",true);
      errorMap.set("secondFieldError",true);

      let errorValidators:ValidationErrors = errorMap;

      return errorValidators;

    }
  }

, но это не вызовет никаких ошибок.

Мой шаблон выглядит следующим образом: 

<mat-form-field>
  <input formControlName="firstField" type="datetime-local" placeholder="First Field" [errorStateMatcher]="errorMatcher" matInput>                        
      <mat-error *ngIf="Form.errors?.firstFieldError">
      First field error!
      </mat-error>
</mat-form-field>

Может кто-нибудь помочь мне понять, почему первый работает, а второй нет

1 Ответ

0 голосов
/ 21 января 2020

Джим, пользовательский валидатор не работает, как вы говорите. Вам нужно вернуть объект (или ноль). Таким образом, ваш valitadion должен выглядеть примерно так: 

export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
    let invalid=false
    const error={}
    if (!control.value.firstField && control.value.secondField)
    {
        error.firstFieldError=true;
        invalid=true;
    }
    if (!control.value.secondField && control.value.thirdField)
    {
        error.secondFieldError=true;
        invalid=true;
    }
    return invalid?error:null;
  }

Посмотрите, как мы получаем значение из "control" - это formGroup- и как мы создаем объект с одним или двумя свойствами - вы можете видеть в своем. html если вы напишите чек- 

{{form.errors|json}}

ПРИМЕЧАНИЕ: на самом деле я не понимаю ваш валидатор и представляю себе, как кто-то учитывает описание в вашем вопросе

...