超过 maxlength="10" | 在 textarea 上添加类“max-length”角 4

【问题标题】：Add class "max-length" on textarea when it exceeds the maxlength="10" | Angular 4超过 maxlength="10" | 在 textarea 上添加类“max-length”角 4
【发布时间】：2018-06-18 04:36:30
【问题描述】：

当用户在 textarea 上输入超过 200 个字符时，我想添加类名“max-length” | Angular 2 格式

<textarea class="form-control" id="input" name="input" maxlength="200" placeholder="Placeholder" cols="10" rows="5">Value</textarea>

【问题讨论】：

标签： angular2-template angular2-forms angular4-forms

【解决方案1】：

您可以在输入上添加一个更改事件并获得以下长度检查，并且基于验证可以添加一个类：

HTML：

<textarea class="form-control {{dynamicClass}}" (change)="valueChange($event)" id="input" name="input" maxlength="200" placeholder="Placeholder" cols="10" rows="5">Value</textarea>

TS：在你的类中定义这个变量：

dynamicClass: string;

以下是你的方法：

valueChange(event){
   if(event.target.value.length > 200){
     this.dynamicClass = "max-length";
   }
}

【讨论】：