剑道UI角2+文本框浮动标签重叠

问题描述：

我测试floatingLabel（docs），但使用ngModel，标签重叠内容剑道UI角2+文本框浮动标签重叠

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

答

问题你给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 = ''; 
}

我不明白“使用占位符---> floatingLabel =”这样的名字“。我不想用占位符 –

标签重叠内容>>>>>你的问题这个。因此，这就是为什么iam告诉不使用两种类型的分配值。使用 floatingLabel =“名字”（或）值：字符串='你好' –

我需要指定值并看到floatingLabel作为屏幕截图中的第二个图像。问题是，当“模糊”时，浮动标签返回的内容而不是块的输入 –

答

这里是一个合适的解决方法。它手动设置容器的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); 
    } 
}

干杯！

剑道UI角2+文本框浮动标签重叠

相关推荐