Angular 4 : How to define custom validator for input which wont allow numbers?

Question

I am trying to create a custom validator in angular 4 project which will only allow characters other than numbers to be typed.

So Far I have tried multiple options but none seem to work.

I am doing something like this:

Component

ngOnInit() {
  this.form = new FormGroup({
    ...
    city: new FormControl('', validateCity)
  });
}

Validator

import { FormControl } from '@angular/forms';

function validateCity(c: FormControl) {
  let CITY_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]/i;

  return CITY_REGEXP.test(c.value) ? null : {
    validateCity: {
      valid: false
    }
  };
}

am I doing something wrong? thanks

Can you please plunker/fiddle?

Pankaj Parkar
– Pankaj Parkar

2017-08-10 12:32:10 +00:00
Commented Aug 10, 2017 at 12:32 — Pankaj Parkar
– Pankaj Parkar, Commented Aug 10, 2017 at 12:32

Kld · Accepted Answer · 2017-08-10 12:16:30Z

3

Since you just have a regex you could just use the pattern validator

city: new FormControl('',  Validators.pattern('[A-Za-z]'))

answered Aug 10, 2017 at 12:16

Kld

7,1183 gold badges39 silver badges50 bronze badges

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

Comments

Pablo Lozano · Accepted Answer · 2017-08-10 12:32:50Z

1

Your regular expression is not correct:

let CITY = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]/i;
console.log(CITY.test('Hello9'))

You need a regex that matches only characters and spaces:

let re=/^[A-Za-z ]+$/

console.log (re.test('Barcelona')) //true
console.log(re.test('Los Angeles')) //true
console.log(re.test('Paris 9')) //false

But maybe you need to allow accents, umlauts ... so you can check this SO question

answered Aug 10, 2017 at 12:32

Pablo Lozano

10.4k2 gold badges43 silver badges64 bronze badges

Collectives™ on Stack Overflow

Angular 4 : How to define custom validator for input which wont allow numbers?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related