D'lo DeProjuicer D'lo DeProjuicer - 20 days ago 6
Android Question

Ionic 2 build failing because of Angular 2 validation attributes

I don't get the errors when testing on the browser but as soon as I compile

ionic build android
I get an error:

Before adding Angular 2 specific validation
<ion-input type="text" name="username" required></ion-input>
the
required
attribute did not throw an error

ngc: Error: Error at /Users/simo/work/abalobi-web/.tmp/pages/login/login.ngfactory.ts:895:85: Property 'required' does not exist on
type '{ [key: string]: any; }'.
Error at /Users/simo/work/abalobi-web/.tmp/pages/login/login.ngfactory.ts:900:85: Property 'pattern' does not exist on type '{ [key: string]: a
ny; }'.
at check (/Users/simo/work/abalobi-web/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
at Tsc.typeCheck (/Users/simo/work/abalobi-web/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9)
at /Users/simo/work/abalobi-web/node_modules/@angular/tsc-wrapped/src/main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3


Form:

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)" novalidate>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" name="username" ngModel #usernameRef="ngModel" pattern="^[A-Za-z]+$" required></ion-input>
</ion-item>
<div *ngIf="usernameRef.errors && (usernameRef.dirty || usernameRef.touched)">
<div [hidden]="!usernameRef.errors.required">
Field cannot be blank please enter username
</div>
<div [hidden]="!usernameRef.errors.pattern">
Username can only contain letters please enter correct username
</div>
</div>
<ion-item>
<ion-label floating>Passowrd</ion-label>
<ion-input type="password" name="password" ngModel #passwrodRef="ngModel" required></ion-input>
</ion-item>
<div [hidden]="passwrodRef.valid || passwrodRef.pristine">
Field cannot be blank please enter password
</div>

<button type="submit" ion-button color="primary" block [disabled]="!loginForm.form.valid" >Login</button>
</form>

Answer

Somehow it seems the validation I was doing is not approach is either not the standard Angular 2 / Ionic 2 form validation approach. I am not sure yet however I found a solution.

Form:

<form [formGroup]="loginForm" (submit)="loginFn()">
    <ion-list>
        <ion-item>
                <ion-label floating>Username</ion-label>
                <ion-input type="text" formControlName="username"></ion-input>
        </ion-item>
        <div [hidden]="loginForm.controls.username.valid || (loginForm.controls.username.pristine && !loginForm.controls.username.touched)" class="validation-message">
                Username cannot be blank or contain numbers
        </div>

        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password" formControlName="password"></ion-input>
        </ion-item>
        <div [hidden]="loginForm.controls.password.valid || (loginForm.controls.password.pristine && !loginForm.controls.password.touched)" class="validation-message">
            Field cannot be blank please enter password
        </div>

        <button type="submit" ion-button color="primary" block [disabled]="!loginForm.valid">Login</button>
    </ion-list>
</form>

TypeScript:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  loginForm:any;

  constructor(public navCtrl: NavController, public _form: FormBuilder) {
    this.loginForm = this._form.group({
      "username": ["", Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*')])],
      "password": ["",Validators.required]
    });
  }

  loginFn() {
    console.log(this.loginForm.value)
  }
}

Sources: Joshmorony, YouTube, Scotch