rostamiani
rostamiani

Reputation: 3265

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

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

Upvotes: 1

Views: 84

Answers (1)

Allabakash
Allabakash

Reputation: 2027

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

Upvotes: 1

Related Questions