Combining HTML and Angular reactive form validation

Question

I'm building an Angular Reactive Form and I have an input of type number. I have provided Validators.min(0) to the FormControl, however when I focus the input and scrolls down or holds the Arrow down button the value goes bellow 0. Is it a bad practice to combine Angular Validators with native html validator like min.

Here is what I have at the moment

HTML

<input type="number" formControlName="quantity">

TS

quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),

And this is what I have tried

HTML

<input type="number" min="0" formControlName="quantity">

TS

quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),

It seems to work ok, still not sure if it is considered a bad practice and if there are any pitfalls in this approach.

Answer 1

For this scenario it's OK, because maximum you are going to get the same validation added twice, which is not a problem. You are simply using the HTML attribute for limiting negative values and not for doing extra validations that could simply be done with reactive form validations.

So your code change is fine, in my opinion. We could also write an Angular directive that blocks negative values, this is a simpler solution:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormsModule,
  FormBuilder,
  Validators,
  ReactiveFormsModule,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="form">
    <input type="number" min="0" formControlName="quantity"/>
    {{ form?.get('quantity')?.errors | json }}
</form>
  `,
})
export class App {
  name = 'Angular';
  form = this.fb.group({
    quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),
  });
  constructor(private fb: FormBuilder) {}

  ngOnInit() {}
}

bootstrapApplication(App);

Stackblitz Demo

Answer 2

The form input is used to ensure that user input is complete and correct.

So you can add logic to handle the validation status, add the validator to the filed, etc. And you can combine with HTML min attribute to specify the minimum value for an input element.

The method min from Validators means that the control's value to be greater than or equal to the provided number:

  form = this.fb.group({
    quantity: this.fb.control(null, [Validators.required, Validators.min(0)]),
  });

// Handling form input in template : I use mat-error to display error and mat-form-field (from MatInputModule) to apply styles.

  <mat-form-field appearance="outline">
    <input type="number" min="0" matInput [formControl]="quantityCrl">
    <mat-error *ngIf="form.controls['quantity'].hasError('min')">
       Min value 0
    </mat-error>
  </mat-form-field>