Question

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

Answer 1

只有在ion-label元素内开始使用ion-item后才会出现此问题。

在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的解决方案

在测试版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>

离子2形式验证失灵

1 个答案: