首頁猿問 Angularjs...

Angularjs 最小長(zhǎng)度驗(yàn)證停止字符計(jì)數(shù)器

JavaScript

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

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

查看完整描述

2 回答

達(dá)令說

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊

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

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

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

<textarea ng-trim="false"

ng-model="form.text"

ng-change="checkTextLength()"

name="formText">

</textarea>

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

</form>

然后在您的控制器中，假設(shè)您只是$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 在這里創(chuàng)建了一個(gè)工作示例。我還在模板中添加了一些內(nèi)容以顯示有效性狀態(tài)。

反對(duì) 回復(fù) 2021-06-11

三國紛爭(zhēng)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊

這可能是因?yàn)?code>form.text在達(dá)到 minlength 之前，angular 不會(huì)將 textarea 的內(nèi)部狀態(tài)保存到其變量中。這應(yīng)該是很容易通過改變來驗(yàn)證這個(gè)<p>來自標(biāo)簽的內(nèi)部文本form.text.length來form.text。

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

反對(duì) 回復(fù) 2021-06-11