Angular: отправка формы при входе не работает с updateOn: 'submit'

У меня есть форма с 'updateOn:' submit ', так как нам нужно только проверить, как только наш пользователь отправит. Однако это привело к тому, что отправка при входе перестала работать: она запускает проверку, но действует так, как если бы в форме не было значений, и показывает только сообщение Validators.required. Когда я распечатал форму в консоли, она также увидела, что форма пуста. Когда отправка вызывается нажатием на кнопку отправки, все работает хорошо.

Есть ли способ обнаружить нажатие клавиши ввода и программно вызвать собственный submit для запуска проверки или решить эту проблему более разумным способом?

Я воспроизвел его по этой ссылке Stackblitz: https://stackblitz.com/edit/angular-p4p5k9?file=src%2Fapp%2Fapp.component.ts

Как смоделировать: 1. Введите значение в текстовое поле и нажмите «Отправить». Значение отображается в консоли 2. Введите что-нибудь еще в текстовое поле и нажмите Enter. Новое значение не обновилось, вместо этого в консоли отображается старое значение.

Мне нужно каким-то образом вызвать программную отправку при входе, чтобы при вызове метода submit () в подписке enterHit форма уже содержала в себе новые значения.


angular validation forms formgroups
person thedoseoftea    schedule 27.08.2019    source источник
comment
Последний комментарий Пателя Руши решил мою проблему.   -  person thedoseoftea    schedule 27.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

в вашем ts файле возьмите одну переменную

isSubmitted:Boolean = false;

И дайте это конкретному условию валидации. Пример, как показано ниже.

  <div *ngIf="testForm.get('amount').errors && submitted" class="text-danger">
      <div *ngIf="testForm.get('amount').errors.required && submitted" class="fontSize12">Amount is
        required
      </div>
  </div>

И ваше нажатие кнопки должно быть

submitForm(form:FormGroup) {
    this.isSubmitted = true;
}
person Rushi Patel    schedule 27.08.2019
comment
Возможно, я плохо описал проблему. Когда пользователь нажимает Enter, ts-файл не может видеть значения, записанные в форме, потому что собственная отправка еще не произошла (пользователь не нажал кнопку отправки) - person thedoseoftea; 27.08.2019
comment
Попробуйте добавить ‹форму #yourform = ngForm (ngSubmit) = onSubmit ()› - person Rushi Patel; 27.08.2019
comment
Метод onSubmit () on (ngSubmit) также вызывается только при нажатии кнопки отправки, он не реагирует на нажатие клавиши ввода. Когда я попытался добавить # form = ngForm, страница перестала работать, похоже, что этот фрагмент кода не работал с существующим экземпляром formGroup - person thedoseoftea; 27.08.2019
comment
Ок понял твою проблему. У вас есть проблема с автофокусом. Добавьте Автофокус в любое из полей при создании формы и нажмите клавишу ВВОД. Может, это поможет stackoverflow.com/questions/42861734/ - person Rushi Patel; 27.08.2019
comment
Мне жаль, что я все еще веду тебя. У нас уже есть автофокус на первом поле ввода, и даже когда мы вручную заполняем данные в поле и нажимаем ввод, отправка не происходит. Мы даже подписались на свойство enterhit и вызываем нашу программную отправку (которая извлекает данные и, кроме их отправки, также отправляет их в наш магазин rxjs). Эта же программная отправка также вызывается в нашем ngSubmit (). - person thedoseoftea; 27.08.2019
comment
Происходит следующее: 1. если пользователь вводит данные в поля ввода в наших формах и нажимает кнопку отправки вручную, в this.form.value записываются данные, а наш метод submit () вызывается из ngSubmit, помещает данные в наш магазин и еще много чего. 2. если пользователь вводит данные в поля ввода в наших формах и нажимает Enter, форма не регистрирует эту операцию так же, как нажатие кнопки отправки, тогда срабатывает наша подписка на enterhit и вызывает программный submit (), который проверяет это .form.value и видит пустые значения, потому что кнопка отправки не была нажата. - person thedoseoftea; 27.08.2019
comment
stackblitz.com/edit/, когда вы напишите что-нибудь и нажмите submit, значение записывается в консоль. Когда вы пишете что-то еще и нажимаете Enter, в консоли все еще записывается старое значение - person thedoseoftea; 27.08.2019
comment
(keyup.enter) = '$ event.target.blur (); распространятьEnter ()' исправляет вашу проблему - person Rushi Patel; 27.08.2019

arrow_upward
0
arrow_downward

Вы можете создать логическую переменную hasSubmittedOnce и установить для нее начальное значение false, а при отправке формы изменить ее значение на true

private hasSubmittedOnce: boolean = false;

onSubmit() {
 if(!this.hasSubmittedOnce) {
   this.hasSubmittedOnce = true;
 }
}

после этого обновите вашу проверку валидации, добавьте условие hasSubmittedOnce, если hasSubmittedOnce истинно, тогда только валидируйте значения и покажите сообщения об ошибках

person Amardeep Singh    schedule 27.08.2019
comment
Я, наверное, немного запутанно это описал. У меня проблема в том, что, если пользователь не нажимает кнопку отправки, файл ts не знает никаких значений в форме и видит this.form.value как пустой, потому что он обновляет свои значения только при нажатии кнопки отправки. Когда пользователь нажимает клавишу Enter вместо нажатия кнопки, кнопка отправки не реагирует, и проверки, запускаемые при нажатии клавиши ввода, также видят форму как пустую. - person thedoseoftea; 27.08.2019