Angular input min validation [duplicate]

Question

I am unable to validate for a minimum number on a material input, even though I can successfully validate for required.

<input min="0.01" matInput type="number" placeholder="Amount" style="width: 49%;" [formControl]="numberControl" name="amount" [(ngModel)]="amount" required> <mat-hint> <strong>Available cash: {{selectedMovementFrom?.portfolioValue | currency: 'GBP': 'symbol'}}</strong> </mat-hint> <mat-error *ngIf="numberControl.hasError('min')"> Amount cannot be negative. </mat-error> <mat-error *ngIf="numberControl.hasError('required')"> Please enter amount. </mat-error>

I have also tried checking for validation by referencing the errors object like so:

<mat-error *ngIf="numberControl.errors?.min"> Amount must be greater than £0.00 </mat-error>

However this also does not display the error, having checked the docs I'm still non-the-wiser.

Any pointers or obvious things I've missed?

min is simply not an angular validation directive. Create it yourself, or use a reactive form. — JB Nizet
– JB Nizet, Commented Aug 16, 2018 at 11:14

Sreekar Sree · Accepted Answer · 2018-08-16 11:19:42Z

import { Directive } from '@angular/core'; import { NG_VALIDATORS, AbstractControl, ValidatorFn, Validator, FormControl } from '@angular/forms'; @Directive({ selector: '[appMinAmountValidator] [ngModel]', providers: [ { provide: NG_VALIDATORS, useExisting: MinAmoutValdiatorDirective, multi: true } ] }) export class MinAmoutValdiatorDirective implements Validator{ validator: ValidatorFn; constructor() { this.validator = validateminAmount(); } validate(c: FormControl) { return this.validator(c); } } // validation function function validateminAmount() : ValidatorFn { return (c: AbstractControl) => { let isValid = c.value >0; if(isValid) { return null; } else { return { isminAmountValid: { valid: false } }; } } }

Anj D · Accepted Answer · 2018-08-16 11:24:41Z

Give it like this:

 <input [min]="0.01" matInput type="number" placeholder="Amount" style="width: 49%;" [formControl]="numberControl" name="amount" [(ngModel)]="amount" required>

Collectives™ on Stack Overflow

Angular input min validation [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related