Angular 如何在Ionic 3中以窗体显示错误消息

在这里，我尝试在

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
文件中很好，但我不知道在我的表单验证时如何显示错误，因为我对ionic和angular还不熟悉

有人能帮我吗

谢谢

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

如果您只想在某些地方显示错误，则需要使用
*ngIf
指令。将错误消息放在所需的任何位置，并添加一个
*ngIf
，以指示在何种情况下应显示该消息

错误消息：不正确的电子邮件的基本思想是在类中（在.ts文件中）有一个属性，您将更新该属性以反映消息是否应该出现。其主要思想是使用ts文件中的方法来执行检查/验证，并更新
emailIsCorrect
属性。

例如，您可以在
中使用
（keypress）=“performCheckOnKeyPress（$event.keyCode）”
属性在用户按键时调用验证方法

更多解释请参见下文

执行自定义检查和验证
我试图在
Ionic-3
中以
形式显示错误消息

有几种选择：

有条件地显示内容/错误消息：
将根据.ts文件中变量的状态隐藏内容。

*ngIf
的工作原理类似于javascript
if
：
*ngIf=“myVar”
if（myVar）{}
。未定义或错误的
myVar
将不显示内容。看看文档中的用例示例

执行自定义验证：您可以选择向.ts文件中的类添加额外的属性和方法，并使用
*ngIf
有条件地显示内容。


您还可以使用javascript检查来：


禁用选项（就像使用
在代码中所做的那样）
使用三元检查设置文本或CSS类等内容
{{variable？'basic class'：'error-class'}
。您还可以使用方法调用，如
{{{foo（）}
，其中
foo（）{return“some text”；}

当某些事件发生时，使用标记上的属性执行自定义检查（就像您使用javascript的onclick
=>
（单击）=“”
，
onkeypress
=>
（按键）=“”
，…）
如果您将所有错误消息存储在一个变量中，并希望在一个位置显示它们，如
请更正以下字段**电子邮件**和**密码**
（当电子邮件和密码字段都未通过验证时），您可以使用
{{errormessagesvvariable}
您可能还想看看angular2和文档中提供的示例。事实上，当您使用
时，电子邮件和其他组件有一个基本验证，
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问题：

您的代码中有一个错误，使其无论是否有效都会被发送

将
放入表单时，按下该按钮将触发为表单提供的表单提交方法（
）。在这种情况下，按下
取消
按钮也将提交表单

修复程序：如果您想让“取消”和“下一步”按钮彼此相邻，您可能希望将它们都移动到
…
标记之外。
请注意，通过将“下一步”按钮移到表单外部，它将不再提交表单（它将只调用
NEXT（）
方法）

如果您希望下一步按钮在
之外提交表单，您还应在单击
方法时调用该方法。i、 e.
（单击）=“下一步（）；登录（）”

注意：您可以为
（单击）=“…”
和其他角度指令属性编写非常简单的javascript（也适用于
*ngIf=“…”
）。虽然javascript有一些限制，但是只要尝试一下你想放在那里的JS代码就可以了



ionic v1开发者注意事项
离子1使用角1。离子v2/v3使用角度2。
在第2节中引入的更改：


（按键）=”
，
（点击）=”
替换了
ng按键=“”
和
ng点击=“”
*ngIf
，
*ngFor
替换了
ng if
和
ng for
我已修复了
*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>

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