Ionic 2 Formvalidierung funktioniert nicht

Question

Meine Ionic 2 Form basiert auf floating-labels.

Wenn jedoch HTML-Validierungselemente hinzugefügt werden, werden sie nicht auf der Seite angezeigt. Die folgenden div Elemente werden nicht angezeigt, wenn die Validierung fehlschlägt.

Sind div Tags innerhalb von <ion-item> nicht zu verwenden?

<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

Dieses Problem scheint nur auftreten, wenn Sie ion-label innerhalb des ion-item Element mit starten.

Es gibt eine post darüber auf dem Ionic Forum, das ich gerade gestoßen bin und es bietet eine detailliertere Erklärung und einige Umgehungslösungen.

@brandyshea

Ich glaube, das ist ein Problem tatsächlich mit Inhalt Projektion, da es das verschachtelte Ionen Label greifen will, aber es ist nicht in der Lage richtig zu platzieren.

Und

@brandyshea

Das Element für ein ion-label Element aussehen wird und ob es es existiert, wird ignorieren andere Elemente ...

Meine Abhilfe

Wenn ich auf dieser meiner Lösung kam, war die Validierung Elemente außerhalb des ion-item Elements zu setzen, aber Ionic hat ihre eigene Lösung eingeführt

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

ionische Lösung

In Beta 8 Ionic eingeführt, um ein item-content Attribut, das kann zu einem Element hinzugefügt werden, so dass es in einem ion-item angezeigt wird. Nicht getestet diese ein noch nicht, aber es war in der Post habe ich erwähnt, verbunden

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