Kendo UI Angular 2+ TextBox浮动标签重叠

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

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

干杯！

Answer 2

问题是你为ngModel变量赋值。这就是问题

像这样更新。

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

声明空变量。

使用占位符---＆gt; floatingLabel="First name"喜欢这个

它解决了你的问题！

Iam更新了您的plunker代码，我检查了它的工作情况。检查此代码并运行。

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