angular 7 input number validation

Question

In angularjs:

<form name="f" novalidate>
<input type="number" ng-model="x" name="x">
</form>

<div ng-if="f.x.$error.number">NaN</div>

Can I get same in Angular?

E.g. <input type="number"> is valid in Angular7 is input is 'eee'.

<input type="number" required> is invalid if input is 'eee', but also invalid for ''.

Edit

As far as I see if I try to add some validator - it receives empty value in case of 'non-numeric' value.

Edit 2

Prolly will use workaround like this:

nativeNumber(element: ElementRef):ValidatorFn {
        return () => {
            return element.nativeElement.validity.valid ? null : {'number': true};
        }
    }

rsarmiento-pl · Accepted Answer · 2019-05-16 09:56:00Z

2

You can fix this by adding Validators of Angular,

There is an existing one for Required: Angular Form Validation

You can use pattern and pass a Regex to check for numeric: /^[a-zA-Z0-9]+$/

Then add reference to your input by declaring it as FormControl, add the validators and pass the reference in the input's formControl Attribute. Dont forget to add your newly created form control on your form group.

add to Class:

let numericRegex = /^[a-zA-Z0-9]+$/;
let myNumeric = new FormControl('', [
  Validators.required,
  Validators.pattern(numericRegex), // <-- Here's how you pass in the custom validator using regex.
]);

Template:

<input class="form-control"
      [formControl]="myNumeric" required >

  <div *ngIf="myNumeric.errors.required">
    value is required.
  </div>
  <div *ngIf="myNumeric.errors.pattern">
    only alphanumeric
  </div>

Hope this helps!

answered May 16, 2019 at 9:56

rsarmiento-pl

364 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Petr Averyanov Over a year ago

I dont need required in some places - I want to allow blanks, but not non-numbers and I want to keep input type number, so pattern wont work. And btw your pattern is wrong...

rsarmiento-pl Over a year ago

So, you want numbers and blanks only? Any specifics why or where would you use this validation? Is it for a phone number or something?

Petr Averyanov Over a year ago

I want maximum versatility here -- e.g. in some places empty value is allowed, in some not.

Yingrjimsch · Accepted Answer · 2019-05-17 06:43:23Z

1

I like to validate my forms with FormGroup and FormBuilder.

Angular 7 HTML:

<form [formGroup]="myFormGroup">
  <input type="number" ng-model="x" name="x" 
   formControlName="myInputField">
</form>

Typescript:

public myFormGroup: FormGroup;
constructor(private formBuilder: FormBuilder, ...) {
  this.myFormGroup = this.formBuilder.group({
    myInputField: ['', [Validators.required, 
    Validators.pattern('^\\d*$')]]
  });
}

So it validates immediately. I hope I could help.

edited May 17, 2019 at 6:43

answered May 16, 2019 at 9:53

Yingrjimsch

1221 gold badge1 silver badge11 bronze badges

3 Comments

Petr Averyanov Over a year ago

I dont need required in some places - I want to allow blanks, but not non-numbers and I want to keep input type number, so pattern wont work. And btw your pattern is wrong too...

Yingrjimsch Over a year ago

If you want to allow blank you just can remove the Validators.required since all Validators are in an array. Why do you want to keep input type number so urgently? Where did you find an error in my pattern? Let me know. I hope we can get your wished result.

Petr Averyanov Over a year ago

.1 1.1. 1e1 are all valid numbers

Collectives™ on Stack Overflow

angular 7 input number validation

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related