Ionic 2 表单验证出现故障答案

【问题标题】：Ionic 2 form validation malfunctioningIonic 2 表单验证出现故障
【发布时间】：2023-03-30 12:15:04
【问题描述】：

我的 Ionic 2 表单基于 floating-labels。

但是，当添加验证 HTML 元素时，它们不会显示在页面上。验证失败时不会显示下面的div 元素。

div 标签不能在<ion-item> 内使用吗？

<ion-list>
    <ion-item>
        <ion-label floating>First Name</ion-label>
        <ion-input type="text" id="fname" [ngFormControl]="fname"></ion-input>
        <div *ngIf="fname.touched">
            <div *ngIf="fname.errors?.minlength">First name should be atleast 2 characters</div>
            <div *ngIf="fname.errors?.invalidFirstCharacter">First character should be an alphabet</div>
        </div>
    </ion-item>
</ion-list>

【问题讨论】：

标签： ionic2 angular2-forms

【解决方案1】：

这个问题似乎只有在您开始在 ion-item 元素内使用 ion-label 时才会出现。

我刚刚在 Ionic 论坛上有一个 post 与此有关，它提供了更详细的解释和一些解决方法。

@brandyshea

我认为这实际上是内容投影的问题，因为它想要抓取嵌套的离子标签，但无法正确放置。

和

@brandyshea

该项目将查找 ion-label 元素，如果存在，它将忽略其他元素...

我的解决方法

当我遇到这个问题时，我的解决方案是将验证元素放在 ion-item 元素之外，但是 Ionic 已经引入了他们自己的解决方案

<ion-item>
    <ion-label floating>Input 1</ion-label>
    <ion-input type="text" id="fname" [ngFormControl]="input1"></ion-input>
</ion-item>
<div *ngIf="input1.touched && input1.errors?.minlength">
    Input 1 must contain at least 2 characters
</div>

Ionic 的解决方案

在 beta 8 中，Ionic 引入了一个 item-content 属性，该属性可以添加到元素中，以便在 ion-item 中显示。还没有测试过这个，但在我链接的帖子中提到过

<ion-item>
    <ion-label floating>Input 1</ion-label>
    <ion-input type="text" id="fname" [ngFormControl]="input1"></ion-input>
    <div *ngIf="input1.touched && input1.errors?.minlength" item-content>
        Input 1 must contain at least 2 characters
    </div>
</ion-item>

【讨论】：