Question

我有要求验证简单表单。一切正常，但我在将离开3列表项中的短信放入时遇到了一个小问题。 ion-item包含ion-input元素。如果我把div放在它下面，其中包含一些文本将不会显示，但如果我将该div放在项目之外，那么消息会显示在DOM中，在先前的情况下，我的消息甚至不存在于DOM中。

以下是不显示消息的情况

<ion-item margin-bottom>
            <ion-input type="text" name="serial_number" #serialNum="ngModel" minlength="3" placeholder="WELL ID" [(ngModel)]="well.serial_number"
              required>
            </ion-input>
            <div class="text-md-danger" no-padding *ngIf="serialNum.invalid && (serialNum.dirty || serialNum.touched)">
              <div no-padding *ngIf="serialNum.errors.required">
                <small>
                  Providing WELL ID is mandatory.
                </small>
              </div>
              <div *ngIf="serialNum.errors.minlength">
                <small>
                  WELL ID must be at least 3 characters long.
                </small>
              </div>
            </div>
          </ion-item>

在下面的情况下，会显示消息，但放置不正确，我想避免使用自定义CSS将消息放在该输入字段下面。

<ion-item margin-bottom>
        <ion-input type="text" name="serial_number" #serialNum="ngModel" minlength="3" placeholder="WELL ID" [(ngModel)]="well.serial_number"
          required>
        </ion-input>            
      </ion-item>
      <div class="text-md-danger" no-padding *ngIf="serialNum.invalid && (serialNum.dirty || serialNum.touched)">
          <div no-padding *ngIf="serialNum.errors.required">
            <small>
              Providing WELL ID is mandatory.
            </small>
          </div>
          <div *ngIf="serialNum.errors.minlength">
            <small>
              WELL ID must be at least 3 characters long.
            </small>
          </div>
        </div>

有谁知道为什么ion-input内ion-item以下的元素没有显示？

提前致谢

Answer 1

通常不属于ion-item的内容需要使用item-content进行标记，因此您需要将该标记添加到包装div中：

<div item-content *ngIf="....">

然后它应该像魅力一样工作！ :) DEMO

编辑

我们发现您确实希望将验证消息放在字段下方，这样可以通过ion-list inset并将验证消息标记为单独的ion-item来实现：

<ion-list inset>
  <ion-item>
    <ion-input type="text" name="serial_number" #serialNum="ngModel" minlength="3" placeholder="WELL ID" [(ngModel)]="well.serial_number"
      required>
    </ion-input>            
  </ion-item>
  <ion-item class="text-md-danger" *ngIf="serialNum.invalid && (serialNum.dirty || serialNum.touched)">
    <small *ngIf="serialNum.errors.required">
      Providing WELL ID is mandatory.
    </small>
  </ion-item>
</ion-list>

为什么在离子输入后没有显示任何东西（div，p或只是文本）在离子项内？

1 个答案: