Javascript AngularJS文本区域计数器_Javascript_Html_Angularjs

Javascript AngularJS文本区域计数器

javascript html angularjs

Javascript AngularJS文本区域计数器,javascript,html,angularjs,Javascript,Html,Angularjs,我创建了一个带有文本区域的联系人表单，我想显示使表单有效所需的最小字符数： <div class="field form-group"> <label for="message" class="form-label">Your Message:</label> <textarea id="message" name="message" ng-model="contactData.sender_message" class

我创建了一个带有文本区域的联系人表单，我想显示使表单有效所需的最小字符数：

<div class="field form-group">
        <label for="message" class="form-label">Your Message:</label>
        <textarea id="message" name="message" ng-model="contactData.sender_message"  class="form-control" rows="6" ng-class="{ 'has-error': contactForm.message.$touched && contactForm.message.$invalid }" ng-minlength="10" ng-trim="false" placeholder="Questions? Comments? Concerns?" required></textarea>
        <p ng-show="contactForm.message.$error.minlength">{{10 - contactData.sender_message.length}}</p>
</div>


您的留言：
{{{10-contactData.sender\u message.length}

问题是它只显示“10”，不更新，只在输入10个字符后消失。我猜我的长度有问题，但我不确定

旁注：是否还有其他方法可以让我在单击文本区域时立即显示字符数，而不仅仅是在用户开始键入时

信息

你真的很接近你所需要的，但我做了一些改变

使用

$viewValue.length

而不是

contactData.sender\u message.length

[1]

当用户单击文本区域时，使用
```
ng click=“contactForm.message.$toucted=true”
```
将
```
$toucted
```
值设置为true*
在同一div上使用
```
has error
```
类，该div与
```
表单组的div相同
```


范例

函数TodoCtrl（$scope）{
$scope.contactData={
发送者信息：“
};
}


您的留言：
最小长度{（10-contactForm.message.$viewValue.Length）>0？（10-contactForm.message.$viewValue.Length）：“Met”}

信息

你真的很接近你所需要的，但我做了一些改变

使用

$viewValue.length

而不是

contactData.sender\u message.length

[1]

当用户单击文本区域时，使用
```
ng click=“contactForm.message.$toucted=true”
```
将
```
$toucted
```
值设置为true*
在同一div上使用
```
has error
```
类，该div与
```
表单组的div相同
```


范例

函数TodoCtrl（$scope）{
$scope.contactData={
发送者信息：“
};
}


您的留言：
最小长度{（10-contactForm.message.$viewValue.Length）>0？（10-contactForm.message.$viewValue.Length）：“Met”}

尝试使用

{{10-contactForm.message.$viewValue.length}

尝试使用

{{10-contactForm.message.$viewValue.length}

您是否初始化了控制器中的变量？它可以以null或未定义开头。（在控制器内部：

$scope.contactData.sender_message=“

）同时，尝试将

contactForm.message.$error.minlength

更改为

！contactForm.message.$valid

问题是

型号

除非满足

minlength

的要求，否则不会设置数据。尝试删除

ng minlength=“10”

并检查。尝试

{{{10-contactForm.message.$viewValue.length}}

@entre，这很有效！非常感谢。您是否初始化了控制器中的变量？它可以以null或未定义开头。（在控制器内部：

$scope.contactData.sender_message=“

）同时，尝试将

contactForm.message.$error.minlength

更改为

！contactForm.message.$valid

问题是

型号

除非满足

minlength

的要求，否则不会设置数据。尝试删除

ng minlength=“10”

并检查。尝试

{{{10-contactForm.message.$viewValue.length}}

@entre，这很有效！非常感谢。