Как добавить к валидации сообщения об ошибках?

Question

[zlodiak]

Я сделал реактивную форму и добавил к ней кастомные и встроенные валидаторы. В результате в случае ошибки поле обводится в красную рамку. Однако я хотя бы чтобы кроме этого выводилось текстовое сообщение об ошибке чтобы пользователю было понятно какая именно ошибка произошла. Помогите пожалуйста это сделать.

Здесь минимальный пример.

Вот компонент моей формы:

currPass: string = '123456';
  form: FormGroup;

  constructor() { }

  ngOnInit() {
    this.form = new FormGroup({
      'currPass':         new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(10)], this.checkCurrPass.bind(this)),
      'newPass':          new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(10)])
    });    
  }

  checkCurrPass(control: FormControl): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if(this.form.value.currPass === this.currPass) {
          resolve(null);
        } else {
          resolve({checkCurrPass: true});
        } 
      });     
    });
  }

  onSubmit(): void {
    console.log('submit', this.form);
  }

Вот шаблон:

<form class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="line" [ngClass]="{'error': !form.controls.currPass.valid && form.controls.currPass.dirty}">
      <label for="">Текущий пароль</label>
      <input type="text" formControlName="currPass">
    </div>

    <div class="line" [ngClass]="{'error': !form.controls.newPass.valid && form.controls.newPass.dirty}">
      <label for="">Новый пароль</label>
      <input type="password" formControlName="newPass">
    </div>

    <div class="line">
      <button [disabled]="!form.valid" type="submit">Отправить</button>
    </div>

    <div class="look" (click)="look()">look</div>
  </form>

Answer 1

[0xD34F]

Ну, так, например.

Comments

[zlodiak]

Спасибо, но это не то. У вас для разного типа ошибок выводится одно и то же сообщение. А мне бы разные нужно.

Например для первого поля:
1. пароль не правльный
2. пароль слишком короткий
3. пароль слишком длинный

[0xD34F]

zlodiak, ну, у меня так и выводится - разное для разных ошибок. Каким образом вы видите одно и то же - я без понятия.

В смысле - разное для нового пароля. Для старого да - всегда одно и то же.

[zlodiak]

0xD34F, да, всё верно. я глаза промыл)

[zlodiak]

0xD34F, всё равно немного не то. У поля currPass есть кастомный валидатор. ошибки, которые он проверяет в шаблоне через form.get('newPass').hasError невозможно отобразить...

[0xD34F]

zlodiak, кастомный валидатор, невозможно отобразить - ошибка при вводе текущего пароля бывает ровно одна - введённый пароль не равен настоящему, не может тут быть проблем с отображением. Если проблема с currPass, то при чём тут тогда newPass?

Я ничего не понял.