首頁猿問 Angularjs...

Angularjs 最小長度驗證停止字符計數器

JavaScript

慕無忌1623718 2021-06-10 17:13:22

我正面臨一個奇怪的“錯誤”。我有一個帶有文本區域minlength和maxlength驗證的表單。此外，還有一個超級簡單的字符左計數器：<textarea ng-trim="false" ng-model="form.text" minlength="20" maxlength="240"></textarea> <p>{{240 - form.text.length}} left</p>我不知道為什么我的計數器只有在字符達到 minlength 值后才開始工作......在輸入時計數器卡在 240。在我達到 20 個字符后，計數器跳到 220......這里出了什么問題？

查看完整描述

2 回答

達令說

TA貢獻1821條經驗獲得超6個贊

基本驗證指令（例如）ng-minlength將阻止 ngModel 更新，直到驗證通過。它本身不是一個錯誤，它在許多情況下很有用，但在某些情況下也可能不太有用。比如這個。

在保持使用基于 ngModel 的驗證（包括表單有效性等）的好處的同時，解決此問題的方法是使用$setValidity. 為此，您將刪除該ng-minlength屬性并使用ng-change回調。

您還需要確保您的表單元素已命名并且是已命名表單的一部分，以便訪問相關的 ngModelController。

<textarea ng-trim="false"

ng-model="form.text"

ng-change="checkTextLength()"

name="formText">

</textarea>

<p>{{240 - form.text.length}} left</p>

</form>

然后在您的控制器中，假設您只是$scope在這里使用：

$scope.checkTextLength = function(){

if($scope.form.text.length < 20){

$scope.formCtrl.formText.$setValidity('minlength', false);

} else{

$scope.formCtrl.formText.$setValidity('minlength', true);

}

if($scope.form.text.length > 240){

$scope.formCtrl.formText.$setValidity('maxlength', false);

} else{

$scope.formCtrl.formText.$setValidity('maxlength', true);

}

我分叉了你的 codepen 在這里創建了一個工作示例。我還在模板中添加了一些內容以顯示有效性狀態。

反對回復 2021-06-11

三國紛爭

TA貢獻1804條經驗獲得超7個贊

這可能是因為form.text在達到 minlength 之前，angular 不會將 textarea 的內部狀態保存到其變量中。這應該是很容易通過改變來驗證這個<p>來自標簽的內部文本form.text.length來form.text。

如果可能的話，我會從你的 textarea 中刪除 minlength 屬性，并在稍后添加它作為驗證步驟 - 盡管通過跟蹤它在屏幕上以某種方式通知用戶。

反對回復 2021-06-11

2 回答
0 關注
252 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Angularjs 最小長度驗證停止字符計數器

Angularjs 最小長度驗證停止字符計數器

2 回答

添加回答