Проверка угловых 6 при отправке

Question

У меня есть ситуация, когда мне нужно проверять поля только после отправки.

Поскольку у меня очень большая форма с FormArrays и FormGroup в них, я разделил форму на несколько компонентов, чтобы каждый компонент представлял нагруппа.Кроме того, у меня есть общий компонент, который используется для простого создания сообщений проверки ввода +.

Однако Angular проверяет форму сразу после ввода и не имеет возможности по умолчанию проверять проверку после отправки.

Answer 1

Как вы можете видеть в этой статье, вы можете сделать следующее:

this.login = new FormGroup({
   email: new FormControl(),
   password: new FormControl()
}, { updateOn: 'submit' });

Answer 2

Решение # 1

Первое и очень простое в использовании - иметь какое-либо свойство для родительского компонента, например submitted = false, которое становится true (вручную), когда пользователь отправляет форму.Затем передавайте его вглубь, пока он не достигнет моего общего компонента ввода через много @Input() с.Затем мне пришлось использовать его и использовать в ngIf в качестве дополнительного условия для отображения ошибок.

---

Решение № 2

Я пришел к нему после размышления над Материальными угловыми входами иих пользовательские проверки соответствия.Я пошел к источнику и обнаружил, что там в базовом классе NgForm и FormGroupDirective передаются в конструктор.Через некоторое время после того, как я понял, что это внедрение зависимостей (в Angular есть возможность перемещаться вверх по дереву с помощью внедрения зависимостей ), таким образом, я пришел к решению, которое могло бы использовать DI для получения FormGroupDirective / NgFormкоторые имеют submitted свойство.Таким образом, мы можем иметь submitted свойство только в общем компоненте ввода.И обновите его следующим образом:

constructor(
  @Optional() private form: NgForm,
  @Optional() private group: FormGroupDirective,
) { }

ngOnInit() {
  this.group.ngSubmit.subscribe(e => {
    this.submittd = this.group.submitted || this.form.submitted;
  });
}

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

StackBlitz

Сначала откройте консоль и посмотрите исходное состояние FormGroupDirective.

Кнопка Funny button печатает только в текущем состоянии консоли NgForm и FormGroupDirective.

Во-вторых, нажмите кнопку отправки.Событие ngSubmit инициируется и успешно отслеживается.Затем нажмите Funny button и увидите обновленный статус submitted (в FormGroupDirective).

И еще один пример, но с сообщением об ошибке + индикатор цвета ввода. StackBlitz достаточно удалить значение, затем нажать «Отправить», чтобы проверить его.