Блог

У меня есть одна FormGroup и внутри у меня есть одна кнопка отправки:

 <form [formGroup]="myGroup" (ngSubmit)="submitForm()">
   <input type="text" formControlName="name">
   <button type="submit">Submit</button>
</form>
  

При инициализации моего компонента я вызываю эту функцию для построения формы:

 buildForm() {
  this.myGroup = new FormGroup({
    name: new FormControl(null, [Validators.required]),
  });
}
  

Когда я не заполняю входные данные и не нажимаю кнопку, мой компонент вызывает submitForm() .
Я ввел console.log(myGroup.valid) и это false так, но все равно вызывает (ngSubmit) событие.

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

 if(this.myGroup.valid) {}
  

Наиболее вероятная причина, по которой вы видите, что поведение ваших форм в разных компонентах отличается, — это использование в вашем проекте как шаблонных форм, так и реактивных форм. Во введении к Angular Forms описаны ключевые различия между двумя типами форм.

Как предположили другие комментаторы, в реактивных формах вам нужно будет отключить кнопку отправки, пока данные формы не станут действительными.

Что еще следует упомянуть, так это то, что когда вы включаете (ngSubmit) в свой тег формы, это также позволяет отправлять форму с помощью клавиши enter. Таким образом, даже если ваша кнопка отправки отключена, недопустимые значения формы могут быть отправлены, когда пользователь нажимает enter.

Есть несколько способов исправить это.

Первый подход

Добавьте проверку к (ngSubmit) определению.

 <form [formGroup]="myGroup" (ngSubmit)="myGroup.valid amp;amp; submitForm()">
  

Это предотвратит запуск вашей логики отправки при нажатии кнопки отправки или при нажатии клавиши ввода.

Второй подход

Отключите кнопку отправки в шаблоне и дважды проверьте ввод в компоненте.

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

Когда данные формы недействительны, вы можете легко прервать действие и, при необходимости, выполнить какое-либо протоколирование или другую логику.

 submitForm() {
  if (!myGroup.valid) { 
    // Optionally send a message to your logging service
    return; 
  }
  // Your form submission logic
}
  

Третий подход

Другой вариант — удалить (ngSubmit) из вашего тега формы, затем удалить type="submit" из вашей кнопки отправки и добавить (click) к вашей кнопке отправки.

 <button [disabled]="!myGroup.valid" (click)="myGroup.valid amp;amp; submitForm()">Submit</button>
  

Это устраняет возможность отправки формы с помощью клавиши enter, что может быть желательно в некоторых случаях, но не в других.

При входе в приложение пользователи, вероятно, ожидают, что смогут нажать enter, чтобы отправить свои учетные данные. На страницах, которые могут иметь несколько форм, может возникнуть путаница, какую именно форму запускает клавиша ввода.

Эта опция по-прежнему дважды проверяет, что форма действительна в (click) выражении, поскольку опытному пользователю легко включить кнопки на вашей странице с помощью инструментов браузера и отправить недопустимую форму.

Заключение

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

Если вам не нужно ничего делать, кроме проверки формы перед отправкой, то выражение в шаблоне (первый подход) идеально.

Второй подход позволит вам добавить больше логики, например ведение журнала, когда пользователь отправляет недопустимую форму.

Не начинайте с включенной кнопки, я предпочитаю не показывать никаких кнопок, пока проверка не пройдет успешно.

Вы можете подключить прослушиватель изменений следующим образом:

 fromGroup.changes(changes=>{
  if (changes=="VALID"){ showMyButton(); }
})