"min" validation rule is not applied when using Angular2 "ngForm.valid"

Question

I'm using Angular 8 Form Module for form validation. My problem is that "min" validation rule does not apply when validation. This is my sample form:

html:

<form #form="ngForm" (ngSubmit)="form.valid && submit()">
  <input type="number" min="5" required name="count" [(ngModel)]="count">
  <button>submit</button>
  <br><br>
  Submitted value is : {{submittedValue || "Nothing yet..."}}
</form>

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  count = -5;
  submittedValue :number;

  submit(){
    console.log(this.count);
    this.submittedValue = this.count;
  }
}

You can test run code here: https://angular-html-validation-test.stackblitz.io

@Mridul I added max but nothing changed – rostamiani Dec 17 '19 at 09:49 — rostamiani, Dec 17 '19 at 09:49

score 1 · Accepted Answer · answered Dec 17 '19 at 12:06

Currently template driven forms does not support min, max validation in angular. You need to either implement custom validators for template driven or go for reactive forms.

You can check out this - https://www.concretepage.com/angular-2/angular-4-min-max-validation which helps you with custom validators for template driven forms.

Check out this answer as well. How to use min, max validation in template form angular 2

"min" validation rule is not applied when using Angular2 "ngForm.valid"

1 Answers1