Question

有没有可能在没有ts文件的情况下收到错误消息，我用过这个我可以验证我的输入

  <form #form="ngForm" (ngSubmit)="logForm(form)" novalidate>
        <ion-item>
            <ion-label style="color: black;" fixed>User Name</ion-label>
            <ion-input type="text" name="username" placeholder="valid user name" [(ngModel)]="username"  pattern="[A-Za-z0-9]{3}" required></ion-input>
        </ion-item>

        <ion-item>
            <ion-label style="color: black;"  fixed>Email Id</ion-label>
            <ion-input type="email" name="email" placeholder="Examples@gmail.com" [(ngModel)]="email"
            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></ion-input>
        </ion-item>
        <button ion-button type="submit" value="Submit" block>Login</button>
    </form>
     <p *ngIf=username.valid>  The following problems have been found with the username: </p>

我需要的是如果输入无效则显示错误消息，我不应该提交空表单

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

    constructor(public navCtrl: NavController
) {}

    ionViewDidLoad() {
        console.log('ionViewDidLoad LoginPage');
    } 
logForm(form) {
        console.log(form.value)

        if(form.valid) {
            console.log(form.value);
            /*here i get user entered values as object*/
        }
    }

Answer 1

您需要在表单属性中添加一些内容，以识别我们要验证的字段，因此对于用户名，请说出：

#userName="ngModel"

在这种情况下，您可以放弃[(ngModel)]。

然后验证：

<div *ngIf="userName.errors?.required && userName.touched">
  Name is required
</div>
<div *ngIf="userName.errors?.pattern && userName.touched">
  Not valid
</div>

因此，您只需使用您为输入设置的不同验证，并检查它们是否与验证匹配，例如required，pattern以及表单控件名称的前缀{{1} }

以下是您的用户名验证方式：

errors?

这里是plunker。

表单验证并显示没有ts文件的错误消息

1 个答案: