如何在Ionic 3中的表单中显示错误消息

Question

在这里,我已经尝试在显示错误消息forms中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文件中很好,但我不知道如何在我的表单中显示错误,因为我是离子和角度的新手!

有没有人可以帮我这个？

谢谢!

Answer 1

我不知道如何在验证时在表单中显示错误

如果您只是想在某些地方显示错误,那么该*ngIf指令就是您想要的.将错误消息放在您想要的任何位置,并添加一个*ngIf以指示应在何种情况下显示消息.

基本的想法<p *ngIf="emailIsCorrect">error message: incorrect email</p>是在您的类(在.ts文件中)中有一个属性,您将更新该属性以反映该消息是否应该出现.主要思想是使用ts文件中的方法来执行检查/验证并更新该emailIsCorrect属性.
例如,当用户按下某个键时,您可以使用您的(keypress)="performCheckOnKeyPress($event.keyCode)"属性<ion-input ...>来调用验证方法.

有关更多说明,请参见下文.

执行自定义检查和验证

我试图在显示错误消息forms中Ionic-3.

有几种选择:

有条件地显示内容/错误消息:Angular2 *ngIf指令将根据.ts文件中变量的状态隐藏内容.
*ngIf就像一个javascript if:*ngIf="myVar"<=> if (myVar){}.未定义或false myVar将不显示内容.查看用例文档中的示例.

执行自定义验证:您可以选择在.ts文件中为类添加额外的属性和方法,并使用有条件地显示内容*ngIf.
您还可以使用javascript检查:

• 禁用选择(因为它在您的代码中完成<button [disabled]=""...>)
• 使用三元检查设置内容,如文本或CSS类{{variable ? 'basic-class':'error-class' }}.您还可以使用方法调用,例如<p>{{ foo() }}</p>where foo(){ return "some text"; }.
• 使用标记上的属性(就像使用javascript onclick=> (click)="",onkeypress=> (keypress)="",...时那样)在某些事件发生时执行自定义检查.
• 如果您将所有错误消息存储在一个变量中,并希望在一个地方显示它们<span>Please correct the following fields **email** and **password**</span>(当电子邮件和密码字段都没有通过验证时),您可以使用<span>{{ errorMessagesVariable }}</span>.
• 您可能还想查看angular2 ngModel指令和doc中提供的示例.实际上,当您使用时<form [formGroup] ...>,formGroup会对电子邮件和其他组件进行基本验证,并且会自动更新form: FormGroup;您在.ts文件中声明的变量的字段.

上述元素可能无法反映某些用例的最佳实践.它们是因为您对离子骨架的了解而提到的.

示例:

例如,以下三元是离子发展的良好实践:

<ion-label color="{{ form.controls.email.errors && form.controls.email.dirty ? 'danger' : 'primary' }}" floating> Email </ion-label>

处理按键事件:

<ion-input [formControl]="form.controls['email']" (keypress)="performCheckOnKeyPress($event.keyCode)"></ion-input>.

代码出错

HTML问题:

代码中存在错误,无论代码是否有效,都会发送错误.

当您<button>在表单中放置时,按下该按钮将触发您为表单(<form (submit)="signIn()" ...>)提供的表单提交方法.在这种情况下,按下CANCEL按钮也会提交表格.

修复:如果你想让CANCEL和NEXT按钮彼此相邻,你可能更喜欢将它们都移到<form>...</form> 标签之外.请注意,通过在表单外移动NEXT按钮,它将不再提交表单(它只会调用您的next()方法).

如果您希望您的"下一步"按钮在表单之外提交表单<form>,您还应signIn()在单击时调用您的方法.即(click)="next(); signIn()".

注意:您可以为(click)="..."其他角度指令属性编写非常简单的javascript (也适用于*ngIf="...").虽然这个javascript有一些限制,但只要尝试你想要放在那里的JS代码......

离子v1开发人员的注意事项

离子1使用角1.离子v2/v3使用角2.角2中引入的变化:

• (keypress)="",(click)=""替换ng-keypress=""和ng-click="".
• *ngIf,*ngFor替换ng-if和ng-for

Answer 2

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

我已经设置了下面的代码,它对我有用:

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

如果有的话,哪个只显示错误!

@JMM感谢最好的答案,你才是天才!我只需要这个*ngIf="form.controls['email'].errors && form.controls['email'].dirty"

谢谢大家!