DEV Community

loading...
Cover image for Angular forms - NEVER rely on a disabled "submit" button!

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

Maciej Manista
・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (7)

Collapse
lukoerfer profile image
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.

Collapse
mmanista profile image
Maciej Manista Author • Edited

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

Collapse
cogoo profile image
Colin Ogoo

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

Collapse
lukoerfer profile image
Lukas Körfer

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

Collapse
prabhukadode profile image
Prabhu

Really useful.

Collapse
emmanueldemey profile image
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.

Collapse
mmanista profile image
Maciej Manista Author • Edited

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)?