AngularJS - 动态输入字段的验证

Posted 2023-03-05

【中文标题】AngularJS - 动态输入字段的验证

【英文标题】：AngularJS - validation of dynamic input fields

【发布时间】：2013-06-27 02:30:45

【问题描述】：

比方说，我们有一个像这样的对象：

$scope.company =  name:  de: '', en: ''  ;

和一个输入字段说：

<input type="text" ng-model="company.name[currentLanguage]" />
<button ng-click="currentLanguage='de'">Deutsch</button>
<button ng-click="currentLanguage='en'">English</button>

如果用户填写此字段，则该字段接收 ng-valid 类。如果用户随后更改语言（实际上是 $scope.currentLanguage），则输入字段会正确更新（变为空），但它仍然具有 ng-valid 类，这是错误的。预期的行为将是 ng-pristine。如何实时更新？

很高兴知道这一点。 干杯

PS。没有更多的代码了。就是这样。 PS2。这是您在重复线程中建议的另一个问题。我不使用 ng-repeat。

【问题讨论】：

你能提供更多关于你在哪里设置类的代码吗？

How to validate inputs dynamically created using ng-repeat, ng-show (angular) 的可能重复项

无重复。这是另一个问题。

【参考方案1】：

一旦输入值以任何方式更改，它不会重置为 ng-pristine，除非您强制它这样做。

您可以像这样管理控制器中的类：

$scope.currentLanguage = 'de';
$scope.company =  name:  de: '', en: ''  ;

$scope.setCurrentLanguage = function(str) 
$scope.currentLanguage = str;
var input = angular.element(document).find('input')[0];
if ($scope.company.name[str] == '') 
    angular.element(input).removeClass('ng-dirty');
    angular.element(input).removeClass('ng-invalid');
    angular.element(input).addClass('ng-pristine');
 else 
    angular.element(input).removeClass('ng-pristine');
    angular.element(input).addClass('ng-dirty');

在 html 中：

<input type="text" ng-model="company.name[currentLanguage]" />
<button ng-click="setCurrentLanguage('de')">Deutsch</button>
<button ng-click="setCurrentLanguage('en')">English</button>