如何在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文件中，我有:

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文件中很好，但是当它验证为我对离子和角度的新手时，我不知道如何在表单中显示错误！

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!

有人可以帮助我吗?

谢谢！

推荐答案

我已解决了*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屋！