我的表单无效，但我的 (ngSubmit) 正在调用 function

Question

I have one formGroup and inside i have one submit button:

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

When my component init i call this function to build the form:

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

When i don't fill the input and click in the button, my component is calling the submitForm() . I put a console.log(myGroup.valid) and it is false , but still calls the (ngSubmit) event.
I have other components and seems that when the form is invalid, Angular automatically don't call the submit function when the user click in the submit button. I don't know if i'm forgetting something to Angular do this automatic check, or i really need to do something like in my submit function, like:

if(this.myGroup.valid) {}

Answer 1

Do not start with an enabled button, I prefer to not show any button until validation is good.

You can hook up a change listener like this:

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

Answer 2

The most likely reason for you to see different behavior from your forms in different components is use of both template forms and reactive forms in your project. The Angular Forms Introduction describes the key differences between the two form types.

---

First Approach

Disable the submit button in the template AND double check input in the component.

As other commenters have suggested, with reactive forms you will need to disable your submit button until the form data is valid.

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

What everyone else has failed to mention is that when you include (ngSubmit) in your form tag it also allows submitting the form with the enter key. So, even if your submit button is disabled invalid form values can be submitted when the user clicks enter.

You can easily abort when enter is clicked and form data is invalid with one (poorly formatted) line of code:

submitForm() {
  if (!myGroup.valid) { return; }
  // Your form submission logic
}

---

Second Approach

The other option is to remove (ngSubmit) from your form tag, then remove type="submit" from your submit button and add (click) to your submit button.

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

This removes the ability to submit the form with the enter key, which may be desirable in some cases but not in others.

When logging into an application users probably expect to be able to press enter to submit their credentials. On pages that may have multiple forms it may become confusing exactly which form the enter key is triggering.

You should still double check that the form is valid in your component logic since it is easy for a savvy user to enable buttons on your page with browser tools.