Проверка пользовательской формы Angular 2 не предотвращает вызов onSubmit

Возможно, я глуп, но я не могу понять, как получить пользовательскую проверку формы, чтобы остановить вызов onSubmit, когда проверка не удалась. Я пытался использовать как синтаксис HTML (путем добавления пользовательского ключевого слова проверки непосредственно в htmlTemplate компонента формы), так и через код при создании нового элемента управления. Я также не видел ничего, что указывало бы на то, что эта функция не должна работать для пользовательских валидаторов.

Вот пример кода, который я использую

import { Component, Output, EventEmitter, OnInit } from 'angular2/core';
import { FORM_DIRECTIVES, FormBuilder, Control, ControlGroup} from 'angular2/common';

@Component({
  selector: 'formality-form',
  templateUrl: 'html/formality.html',
  styleUrls: ['styles.css']
})
export class FormalForm implements OnInit {
  formGroup: ControlGroup;

  // Here I register the custom validator to the Control group
  constructor(fb: FormBuilder) {
    this.formGroup = fb.group({
      'date': ['']
    } {validator: FormalForm.customVal});
  }

  // This is my custom validator
  public static customVal(control: ControlGroup){
    return {isFail:true};
  }

  // I would like for this to never be called, since the custom validator is in
  // a state of perpetual fail.
  onSubmit(): void {
    console.log(this.formGroup.value);
    alert('onSubmit called; formGroup.valid = ' + this.formGroup.valid);
  }
}

А вот ссылка на планкр

Я надеюсь, что кто-то может либо показать мне, как заставить это работать правильно, либо указать мне на какую-то документацию, которая признает, что это не работает, как я ожидаю.


angular angular2-forms
person Whelch    schedule 24.05.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Оказывается, я действительно тупой. Валидаторы, такие как required, minLength, maxLength и pattern, являются встроенными атрибутами элемента <input>. Вот почему они предотвращают отправку формы: они встроены в браузер. С другой стороны, пользовательские валидаторы (те, которые вы добавляете сами) управляются Angular, но они не могут остановить форму. от отправки при нажатии кнопки отправки.

Надеюсь, это поможет кому-то еще в будущем.

person Whelch    schedule 25.05.2016

arrow_upward
1
arrow_downward

На самом деле нужно проверить валидность формы:

  • Чтобы отключить кнопку отправки

    <button type="submit" [disabled]="!formGroup.valid">Submit</button>

  • Не выполнять обработку в вашем методе onSubmit

    onSubmit(): void {
  if (this.formGroup.valid) { // <-----
    console.log(this.formGroup.value);
    alert('onSubmit called; formGroup.valid = ' + this.formGroup.valid);
  }
}

Событие submit всегда будет запускаться при нажатии кнопки отправки.

Некоторые другие критерии могут помешать отправке формы, например, ожидающие асинхронные проверки.

Смотрите эту статью для более подробной информации:

person Thierry Templier    schedule 24.05.2016
comment
Кнопка отправки не срабатывает при использовании встроенных валидаторов. Самый очевидный пример — required. Если вы добавите это к элементу ‹input› HTML, он не будет вызывать onSubmit, пока поле ввода пусто. Я хочу, чтобы мой пользовательский валидатор работал именно так. Это означает, что я хотел бы избежать необходимости добавлять [disabled="!formGroup.valid" к моей кнопке отправки. - person Whelch; 24.05.2016