Ionic 2 & Angular 4 Forms validation

Ionic Framework ionic-v3
1

I need to validate the zip code to be numeric. I have seen many Ionic v1 examples that seem to not apply to Ionic v2. I get the msg : “Supplied parameters do not match any signature of call target”.

My question is: is the Call Target in the corresponding .HTML file, and if so, how must it be modified to match the signature?

The .html code looks like this:
#ion-item#
#ion-label floating#Zip Code#/ion-label#
#ion-textarea formControlName=“zipcode”##/ion-textarea#
#/ion-item#

The error started when I added the zipcode entry below.

this.dataForm = new FormGroup({
‘title’: new FormControl(title, Validators.required),
‘description’: new FormControl(description, Validators.required),
‘zipcode’: new FormControl(
zipcode, [’’, Validators.compose(
[Validators.required,
Validators.pattern(’^[+0-9]{10,12}$’)
])],
});

Thanks for any help.

Jerome

2

You lack an HTML form tag with [formGroup]="dataForm". Also, your form control structure should be along the lines of

import { AbstractControl } from '@angular/forms';
zipCode: AbstractControl;

this.zipCode = this.dataForm.controls['zipcode'];

Then in HTML
[formControl]="zipCode";

Ionic doesn’t affect this. The Angular FormBuilder documents are your friend.

3

There’s nothing wrong with your way (aside from verbosity IMHO, and I don’t like having a separate property for each control), but OP’s formControlName="zipcode" should also work just fine. I prefer using FormBuilder instead of instantiating FormGroups manually, so I don’t really have a clue if that construction syntax is correct.