如何在 Ionic 3 中的表单中显示错误消息 [英] How to show error messages in forms in Ionic 3

问题描述

这里我尝试在 Ionic-3 的 forms 中显示错误消息.

Here i have try to display error messages in forms in Ionic-3.

这是我的 email.html 文件:

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

在我的 email.ts 文件中，我有:

In my email.ts file i have:

export class EmailSignupPage {

   form : FormGroup;

   constructor(
       private formBuilder: FormBuilder,
       public navCtrl: NavController,
       public navParams: NavParams,
   ) {
       this.form = this.formBuilder.group({
        email: ['', Validators.compose([Validators.required, Validators.email])]
       });
   }

   ionViewDidLoad() {

   }

   next() {
       this.navCtrl.push(CredentialPage);
   }

   cancel() {
       this.navCtrl.popToRoot();
   }
}

我认为我的代码在 email.ts 文件中很好，但我不知道如何在表单中显示错误，因为我是 ionic 和 angular 的新手！

I think my code is fine in email.ts file, but i don't know how to display errors in my form when it validate as i'm new to ionic and angular!

有没有人可以帮我解决这个问题?

Is there any one who can help me with this?

谢谢！

推荐答案

我已经用 *ngIf 条件解决了这个问题.

I have fixed this problem with *ngIf condition.

我设置了以下代码，它对我有用:

I have set below code and it's working for me:

<form [formGroup]="form" (submit)="signIn()">
    <ion-grid>
        <ion-row>
            <ion-col>
                 <ion-item>
                    <ion-label color="primary" floating>Email</ion-label>
                    <ion-input [formControl]="form.controls['email']"></ion-input>
                  </ion-item>

                  <p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

            </ion-col>
        </ion-row>
    </ion-grid>

    <ion-list padding>
        <ion-item>
            <button ion-button default item-end color="light" (click)="cancel()">CANCEL</button>
            <button ion-button default item-end color="next" [disabled]="!form.valid" (click)="next()">NEXT</button>
        </ion-item>
    </ion-list>
</form>

我只需要使用:

<p *ngIf="form.controls['email'].errors && form.controls['email'].dirty" class="danger" padding>Email is not valid.</p>

代替

<p *ngIf="form.controls.email.errors && form.controls.email.dirty" class="danger" padding>Email is not valid.</p>

如果有，那只是显示错误！

Which is showing simply errors if there is!

@JMM 感谢您的最佳回答，您真是天才！我只需要这个 *ngIf="form.controls['email'].errors && form.controls['email'].dirty"

@JMM thanks for the best answer and you are genius! I need only this *ngIf="form.controls['email'].errors && form.controls['email'].dirty"

谢谢大家！

这篇关于如何在 Ionic 3 中的表单中显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！