Question

我在浏览器上测试时没有收到错误，但是一旦编译ionic build android我就会收到错误：

在添加Angular 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

＆LT;离子输入/＆gt;没有像require或pattern

这样的@Input属性

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

Answer 2

不知何故，我所做的验证似乎不是标准的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 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>

由于Angular 2验证属性，Ionic 2构建失败

3 个答案: