Kendo UI angulaire 2+ TextBox étiquettes flottantes qui se chevauchent

Question

Je teste floatingLabel (docs) mais en utilisant ngModel, l'étiquette chevauche le contenu

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <kendo-textbox-container floatingLabel="First name"> 
     <input kendoTextBox [(ngModel)]="value"/> 
     </kendo-textbox-container> 
    ` 
    }) 
export export class AppComponent { 
    value:string = 'hello' 
} 

Voici le Plnkr: http://plnkr.co/edit/SUBw7zrUT2gsx4JZeGKD?p=preview

Answer 1

problème est-ce que vous donnez de la valeur à la variable ngModel. c'est le problème

mettre à jour comme ça.

value:string = 'hello' 
     to 
value:string = ''; or value:string; 

déclarer la variable vide.

usage titulaire place --->floatingLabel="First name" comme celui-ci

son résolu votre problème !.

Iam a mis à jour votre code plunker iam vérifié son fonctionnement. vérifiez ce code et exécutez.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <kendo-textbox-container floatingLabel="First name"> 
     <input kendoTextBox [(ngModel)]="value"/> 
     </kendo-textbox-container> 
    ` 
    }) 
export export class AppComponent { 
    value:string = ''; 
} 

Answer 2

Voici une solution de contournement appropriée. Il définit manuellement le drapeau focused du conteneur, de sorte que l'étiquette passe à l'autre position.

import { AfterViewInit, Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <kendo-textbox-container floatingLabel="First name"> 
     <input kendoTextBox [(ngModel)]="value"/> 
     </kendo-textbox-container> 
    ` 
    }) 
export export class AppComponent implements AfterViewInit { 
    value:string = 'hello' 

    @ViewChild(TextBoxContainerComponent) container; 

    // workaround for floatingLabel overlapping 
    ngAfterViewInit() { 
     window.setTimeout(() => this.container.focused = true, 0); 
    } 
} 

Cheers!