Adding pattern validation on ion-input

Ionic Framework ionic-v3
1

Heya,

I’ve tried this before but I still can’t get this to work. Note I’m using the latest ionic and angular packages.

So I’m trying to add a pattern to ion-input

I’ve tried multiple things

<ion-input pattern="06([0-9]{8})">...</ion-input>

<ion-input [pattern]="'06([0-9]{8})'">...</ion-input>

<ion-input pattern="variable">...</ion-input>
//with either:
public variable = /06([0-9]{8})/
public variable = "06([0-9]{8})"
public variable = "06\(\[0-9\]\{8\}\)";

Anyone has more info on how to get this working?
Right now my form (and input) is just always invalid whenever I add the pattern attribute.

2

Well I guess I don’t see anything in the source about this, so I can’t use it at all, correct me if I’m wrong.
So it seems most native input features are not available I’m afraid, like limiting the length of the input.

3

Whoopsie,

pattern="06([0-9]{8})"

This actually works

3 Likes
4

it work me with the brackets

[pattern]="[0-9]"

this will not work
pattern="[0-9]"

1 Like
5

Hello Guys

can you help me to validate this pattern, for me its not working.

Validators.pattern(’/\d{1}[a-zA-Z]{2}\d{6}/g’)

or

Validators.pattern(’/\d{1}[a-zA-Z]{2}\d{6}/’)

or

Validators.pattern(’\d{1}[a-zA-Z]{2}\d{6}’)

on the bellow code: -

constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder) {

this.val = navParams.get("value");
if (this.val =="500"){
	this.img="img/UvxAbU3ETaGs3L9swO8M_500-note-front.png";
	}
	else{
	this.img ="img/iatQAQ3oScaQYShkX6FS_2000-note-front.png";
	}
this.myForm = this.formBuilder.group({
'serial':['', [Validators.required, Validators.minLength(9), Validators.pattern('\d{1}[a-zA-Z]{2}\d{6}')]]
});

}

It should match with => 1Aa234567

6

Guys found solution :smile: tried couple of the patterns but i got luck on the following way.:-

[0-9]{1}[a-zA-Z]{2}[0-9]{6}

this.myForm = this.formBuilder.group({
‘serial’:[’’, [Validators.required, Validators.minLength(9), Validators.pattern(’[0-9]{1}[a-zA-Z]{2}[0-9]{6}’)]]
});

which match my string patten :- 1aa123456 => [0-9]{1}[a-zA-Z]{2}[0-9]{6}

7

for me in ionic4 is unlike you

9

This worked for me in Ionic 4