AngularJS - 动态输入字段的验证

时间:2013-06-29 11:10:06

标签: javascript angularjs

让我们说,我们有一个像这样的对象:

$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。

1 个答案:

答案 0 :(得分:2)

一旦输入的值以任何方式改变,它都不会重置为 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>