在 Angular 中使用 $setValidity 函数
Angular $setvalidity() 是一个设置给定表单字段有效性的函数。该函数既可以在构造函数中使用，也可以在其他控制器方法中使用。
本文将展示如何在 Controller 中使用 $setValidity。它还将展示如何在将输入提交到客户端之前在服务器端设置输入的有效性。
Angular 中的 $setValidity
Angular 提供了一个名为 $setValidity 的指令，它可以设置输入的有效性。它在控制器内部使用，而不是在视图内部使用。
$setValidity 函数分配一个键/值对，可用于验证表单元素的有效性。
键是唯一的，值在此上下文中为真或假。当调用 $setValidity 方法时，将特定值添加到 $error 对象，这可用于验证值是否可接受。
$setValidity 函数可以通过以下方式使用：
-
设置整个表单的有效性：
$scope.$setValidity($scope.myForm, 'myFormIsValid'); -
设置字段的有效性：
$scope.$setValidity($scope.myForm, 'fieldName', true);
重要的是要注意 $setValidity 指令不会影响表单字段的有效性。它只是设置表单字段及其相应验证器的有效性。
在 Angular 的控制器中使用 $setValidity 的步骤
本教程将演示如何在 Angular 的控制器中使用 $setValidity。
-
创建一个名为
HomeController的控制器。 -
导入
$setValidity和FormsModule模块。 -
创建一个名为
$setValidity()的函数。在这个函数中，我们将给$setValidity赋值为 true 或 false。 -
在
ngOnInit()事件中调用此函数。这将确保在初始化 Angular 应用程序时，它将调用我们的$setValidity()函数。
让我们通过上面提到的步骤来讨论如何在 Angular 中使用 $setValidity 的示例。
JavaScript 代码：
angular.module('Adil', [
'ngRoute',
'ui.router'
])
.controller('HomeController', ['$scope', function ($scope) {
$scope.loading = false;
$scope.init = function () {
$scope.data = {
};
};
$scope.save = function (data, form) {
console.log(form);
form.input.$setValidity("name", true);
}
$scope.init();
}]);
HTML 代码：
<html>
<head>
<h1>Example of $setValidity in Angular</h1>
<script src="script.js"></script>
</head>
<body ng-app="Adil">
<form name="Name" ng-controller="HomeController">
<div class="form-group">
<label>Please Enter a Valid URL of your Website</label>
<input type="url" />
<span ng-show="Name.input.$valid"></span>
</div>
<button ng-click="save(data, Name)">Save</button>
</form>
</body>
</html>
点击这里来检查上面代码的工作情况。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook