Utilisez la fonction $setValidity dans Angular
L’Angular $setvalidity() est une fonction qui définit la validité du champ de formulaire donné. Cette fonction peut être utilisée à la fois dans le constructeur et dans d’autres méthodes de contrôleur.
Cet article montrera comment utiliser $setValidity dans un contrôleur. Il montrera également comment définir la validité de l’entrée côté serveur avant de la soumettre côté client.
le $setValidity dans Angular
Angular fournit une directive appelée $setValidity, qui peut définir la validité de l’entrée. Il est utilisé à l’intérieur du contrôleur et non à l’intérieur d’une vue.
La fonction $setValidity attribue un couple clé/valeur qui peut être utilisé pour valider la validité d’un élément de formulaire.
La clé est unique et la valeur est true ou false dans ce contexte. La valeur spécifique est ajoutée à un objet $error lorsque la méthode $setValidity est appelée, qui peut être utilisée pour vérifier si une valeur est acceptable ou non.
La fonction $setValidity peut être utilisée de la manière suivante :
-
Paramétrer la validité d’un formulaire entier :
$scope.$setValidity($scope.myForm, 'myFormIsValid'); -
Paramétrer la validité d’un champ :
$scope.$setValidity($scope.myForm, 'fieldName', true);
Il est important de noter que la directive $setValidity n’affecte pas la validité d’un champ de formulaire. Il définit simplement la validité d’un champ de formulaire et son validateur correspondant.
Étape pour utiliser $setValidity dans un contrôleur dans Angular
Ce tutoriel montrera comment utiliser $setValidity dans un contrôleur dans Angular.
-
Créez un contrôleur avec le nom
HomeController. -
Importer les modules
$setValidityetFormsModule. -
Créez une fonction appelée
$setValidity(). A l’intérieur de cette fonction, nous assignerons la valeur de$setValidity()avectrueoufalse. -
Appelez cette fonction dans l’événement
ngOnInit(). Cela garantira que lorsque l’application Angular sera initialisée, elle appellera notre fonction$setValidity().
Discutons d’un exemple d’utilisation de $setValidity dans Angular en suivant les étapes mentionnées ci-dessus.
Code 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();
}]);
Code 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>
Cliquez ici pour vérifier le fonctionnement du code ci-dessus.
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