Kendo UI for Angular 学习笔记

textbox?：<kendo-textbox></kendo-textbox>

• [maxlength]：最大输入长度
• [showSuccessIcon] / [showErrorIcon]:显示内置验证图标
• kendoTextBoxPrefixTemplate：前 后缀 icon
• [clearButton]="true" ：?TextBox 中呈现 Clear 按钮 （“X”）
• [(ngModel)]="value变量"? ：双向绑定
• ?[disabled]="isDisabled" :禁用组件，isDisabled 变量值为布尔值
• ?[readonly]="true"：只读
• ?(afterValueChanged)="onAfterValueChange($event)":在组件接受新值前实现轻微延迟

 <kendo-textbox
        [style.width.px]="350"
        placeholder="Username"
        [maxlength]="maxlength"
        [clearButton]="true"
        (valueChange)="onValueChange($event)"
        [showSuccessIcon]="value.length >= 3"//boolean- 根据开发人员设置的条件呈现验证图标。
        showErrorIcon="initial"//组件自我验证-valid, invalid, touched,和 dirty
      >

        <ng-template kendoTextBoxSuffixTemplate>
          <span class="counter">{{ counter }}</span>
        </ng-template>


//前缀图标
        <ng-template kendoTextBoxPrefixTemplate>
          <kendo-svgicon [icon]="menuIcon"></kendo-svgicon>
          <button kendoButton fillMode="clear" [svgIcon]="calendarSvg"></button>
          <kendo-textbox-separator></kendo-textbox-separator>
        </ng-template>

//后缀图标
     <ng-template kendoTextBoxSuffixTemplate>
          <kendo-textbox-separator></kendo-textbox-separator>
          <button kendoButton fillMode="clear" [svgIcon]="calendarSvg"></button>
          <kendo-svgicon [icon]="bellIcon"></kendo-svgicon>
        </ng-template>

//去抖动值更改 ---默认情况下，Angular Inputs会毫不延迟地处理输入值的每次更新。
但是，输入中的更改可能会触发复杂的操作，例如网络请求。若要处理此类情况，请在组件接受新值之前实现轻微延迟。
        (afterValueChanged)="onAfterValueChange($event)"
        (valueChange)="onValueChange($event)"


      </kendo-textbox>
    </kendo-label>




 public rawValue = 0;
  public value = 0;

  public onValueChange(value: number): void {
    this.rawValue = value;
  }

  public onAfterValueChange(value: number): void {
    this.value = value;
  }