@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>
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Ну, так, например.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы