イオン入力が表示されていないのにイオンアイテムの中に何か（div、p、またはテキストのみ）を置くのはなぜですか？

Question

私は単純なフォームを検証する必要があります。すべてが機能していますが、私はionic 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-item内部ion-input以下の要素が表示されない理由を誰もが知っているのですか？

事前のおかげで、通常ion-itemの一部ではない

Answer 1

物事、item-contentでタグ付けする必要がありますので、あなたがあなたのラップのdivにそのタグを追加する必要があります。その後、

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

をし、それは魅力のように動作するはずです！それは別のion-itemとしてion-list insetを持つと検証メッセージをマークすることによって達成することができるように、我々は、あなたが実際にフィールドだけ下に検証メッセージを配置したかったことが判明:) DEMO

EDIT

：

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