如何在 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 条件解决了这个问题。

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

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

谢谢大家！

Answer 2

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

如果你只想在某些地方显示错误，*ngIf 指令就是你想要的。将错误消息放在您想要的任何地方并添加*ngIf 以指示在哪些情况下应该显示该消息。

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

更多解释见下文。

执行自定义检查和验证

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

有几种选择：

有条件地显示内容/错误消息： Angular2 *ngIf directive 将根据 .ts 文件中的变量状态隐藏内容。
*ngIf 像 JavaScript 一样工作 if: *ngIf="myVar" if (myVar){}。未定义或错误的 myVar 将不显示内容。查看文档中的用例示例。

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

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

上述元素可能无法反映某些用例的最佳做法。提及它们是因为您对 ionic 框架的了解。

示例：

例如，以下三元是离子开发的良好实践：

<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() 方法）。

如果您希望您的 NEXT 按钮即使在 <form> 之外也能提交表单，您还应该在单击它时调用您的 signIn() 方法。即(click)="next(); signIn()"。

注意：您可以为(click)="..." 和其他角度指令属性编写非常简单的javascript（也适用于*ngIf="..."）。虽然该 javascript 有一些限制，但只需尝试您想放在那里的 JS 代码......

---

ionic v1 开发者注意事项

Ionic 1 使用 Angular 1。Ionic v2/v3 使用 Angular 2。 Angular 2 中引入的更改：

• (keypress)=""、(click)="" 替换为 ng-keypress="" 和 ng-click=""。
• *ngIf、*ngFor 替换 ng-if 和 ng-for