劍道UI角2+文本框浮動標籤重疊

Question

我測試floatingLabel（docs），但使用ngModel，標籤重疊內容

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

這裏Plnkr：http://plnkr.co/edit/SUBw7zrUT2gsx4JZeGKD?p=preview

Answer 1

問題你給ngModel變量賦予了什麼價值？那就是問題

更新是這樣的。

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

聲明空變量。

使用佔位--->floatingLabel="First name"這樣

其解決您的問題！

Iam更新了你的plunker代碼iam檢查了它的工作。檢查此代碼並運行。

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

這裏是一個合適的解決方法。它手動設置容器的focused標誌，以便標籤轉到其他位置。

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); 
    } 
} 

乾杯！