DEV Community: Maciej Manista

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

Maciej Manista — Fri, 14 May 2021 15:56:37 +0000

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!

Angular - quick tip of the day: External links - "target" attribute

Maciej Manista — Wed, 10 Mar 2021 11:14:27 +0000

Let’s say we have a link and we want to open it in either new tab or same tab, depending on the value of a variable.
Let’s assume openInNewTab variable is false:

[attr.target]="openInNewTab ? '_blank' : null" - works fine, produces no target attribute
[target]="openInNewTab ? '_blank' : null" - produces target="null" as an attribute, which still opens the link in a new tab, just the same as if you used _blank

TL;DR: use [attr.target] for best results :)

Angular Material tabs - custom body BG color + animation issue (SOLVED)

Maciej Manista — Fri, 28 Aug 2020 09:44:16 +0000

Do you want to set a custom background color for your mat-tab's body section?
Set it for mat-tab-body-wrapper element only.
If you set it for mat-tab-body element, it will break the animation between the tabs - it has to stay transparent.

Avoid using float values for font-size property

Maciej Manista — Wed, 11 Sep 2019 09:59:14 +0000

Let's say that the designs you received include using float values as font-size (e.g. 14.5px). What do you do?

Don't use it.

Don't get fooled by the fact that it works for Chrome and Firefox.
Safari (with the default zoom) is not handling these accurately. It's rounding the value up or down.

>= .5 - rounded up: 10.5px => 11px
< .5 - rounded down: 10.4px => 10px

That basically means that on Safari font-size: 10.5px will render just the same as you would use font-size: 11px.