在 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