離子2構建因爲角2驗證失敗的屬性

Question

我沒有得到對瀏覽器進行測試，但只要我編譯ionic build android我得到一個錯誤，當錯誤：

加角2特定的驗證<ion-input type="text" name="username" required></ion-input>的required前屬性並不會引發錯誤

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 #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 1

不知何故似乎我在做驗證不做法要麼是不屬於標準Angular 2/Ionic 2形式驗證方法。我不確定，但我找到了解決方案。

表：

<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> 

打字稿：

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) 
    } 
} 

來源：Joshmorony，YouTube，Scotch

Answer 2

<離子輸入/>沒有@input屬性，如需要或圖案

https://ionicframework.com/docs/v2/api/components/input/Input/#input-properties

Answer 3

錯誤是從你的模板來。 AOT編譯比JIT更加嚴格。

我跑進去我這樣做的時候：

<input class="form-control" type="text" [(ngModel)]="job.owner" 
     [class.form-control-danger]="owner.errors && (owner.dirty || owner.touched)" 
     placeholder="Job owner" id="selected-owner" name="owner" #owner="ngModel" required> 
<div *ngIf="owner.errors && (owner.dirty || owner.touched)"> 
    <small [hidden]="!owner.errors.required" class="form-control-feedback">A job owner is required. What team or area should "own" this job?      </small> 
</div> 

模板中的owner.errors對象的類型any。訪問酒店的方式有owner.errors['required']。因此，通過AOT編譯器的標記看起來像這樣：

<input class="form-control" type="text" [(ngModel)]="job.owner" 
     [class.form-control-danger]="owner.errors && (owner.dirty || owner.touched)" 
     placeholder="Job owner" id="selected-owner" name="owner" #owner="ngModel" required> 
<div *ngIf="owner.errors && (owner.dirty || owner.touched)"> 
    <small [hidden]="!owner.errors['required']" class="form-control-feedback">A job owner is required. What team or area should "own" this job?      </small> 
</div>