Angular forms - NEVER rely on a disabled "submit" button!

Let's say you're just writing some Angular code.

A form.

That form has some required fields, like email and password.

Your "submit" button is disabled until the form is valid, by using <button type="submit" [disabled]="myForm.invalid">, which you can find in many stackoverflow answers.

You're safe - the feature is working, a user isn't able to submit an invalid form.

Actually, you're not.

Now, try opening the dev console in your browser and manually removing the disabled attribute from the "submit" button.
The button is enabled again and you're able to submit the form, even though the form is invalid.

Remember to add an additional check for the form's validity in the submission function!

Example:

<form (ngSubmit)="submitMyForm()" [formGroup]="myForm">
  <input type="email" formControlName="email" />
  <input type="password" formControlName="password" />
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

Your submitMyForm method should have something to prevent an invalid form from being submitted. Like:

submitMyForm() {
  if (this.myForm.invalid) {
   // here potentially add some visual feedback for a user
    return;
  }

  // form submission logic here
}

Live demo: https://stackblitz.com/edit/angular-reactive-forms-zvzqvd

Just to clarify - any client-side security is not sufficient on its own, so always validate on the server too!

Comments

[Lukas Körfer]

This adds absolutely no value, especially in terms of security. Your second check can be circumvented as easily as the disabled button. Client-side validation can never provide security, you must always check the data on the server, too.

[Maciej Manista]

Can you elaborate on how you would bypass the additional in-function check?

Of course, you're right - however, the point of the article was definitely not to say that any client-side security is enough on its own, it's just to make it a little bit more robust

[C.OG]

Surely it adds value. Are you suggesting to do no client-side validation? I agree that validation needs to be done on the server, but that doesn't seem to be the focus of this article

[Lukas Körfer]

The client-side validation is achieved by disabling the button (and maybe by showing a message) based on a validation rule.

[Prabhu]

Really useful.

[Emmanuel DEMEY]

You need first to check the value on server side. Event with your extra check inside function, I can open the devtools and remove it.

[Maciej Manista]

Thanks alot for the feedback!

Could you please demonstrate or provide an example of how you've managed to edit a live JS code (on a production site)?

[Thomas Sablik]

Frontside form validation is for user convenience only. A user that wants to send invalid form data would use a different client like cURL or Postman. But it's easily possible to open the dev tools, set a breakpoint in the function and skip the check. I have to admit, it's a little bit more difficult with production code. Your post is really dangerous, because it implies some kind of security. It's even tagged with #security, but it doesn't provide any security.