当textarea超过maxlength =“10”|时，在textarea上添加“max-length”类Angular 4

Question

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

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

Answer 1

您可以在输入中添加一个change事件，然后获取长度检查，并基于验证可以添加一个类：

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