Ionic 2 ошибка проверки неработающей

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 элемента, однако Ионные ввели свое собственное решение

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

решение Ионные в

В бета-версии 8 Ионные введен атрибут 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>