Verwendung der Funktion $setValidity in Angular
Das Angular $setvalidity() ist eine Funktion, die die Gültigkeit des angegebenen Formularfelds festlegt. Diese Funktion kann sowohl im Konstruktor als auch in anderen Controller-Methoden verwendet werden.
Dieser Artikel zeigt, wie man $setValidity in einem Controller verwendet. Es wird auch gezeigt, wie die Gültigkeit der Eingabe auf der Serverseite festgelegt wird, bevor sie an die Clientseite gesendet wird.
die $setValidity in Angular
Angular stellt eine Direktive namens $setValidity zur Verfügung, die die Gültigkeit der Eingabe festlegen kann. Es wird innerhalb des Controllers und nicht innerhalb einer Ansicht verwendet.
Die Funktion $setValidity weist ein Schlüssel/Wert-Paar zu, das verwendet werden kann, um die Gültigkeit eines Formularelements zu validieren.
Der Schlüssel ist eindeutig, und der Wert ist in diesem Zusammenhang wahr oder falsch. Der spezifische Wert wird einem $error-Objekt hinzugefügt, wenn die $setValidity-Methode aufgerufen wird, die verwendet werden kann, um zu überprüfen, ob ein Wert akzeptabel ist oder nicht.
Die Funktion $setValidity kann auf folgende Weise verwendet werden:
-
Gültigkeit eines gesamten Formulars festlegen:
$scope.$setValidity($scope.myForm, 'myFormIsValid'); -
Setzen der Gültigkeit eines Feldes:
$scope.$setValidity($scope.myForm, 'fieldName', true);
Es ist wichtig zu beachten, dass die Direktive $setValidity die Gültigkeit eines Formularfelds nicht beeinflusst. Es legt lediglich die Gültigkeit eines Formularfelds und seines entsprechenden Validators fest.
Schritt zur Verwendung von $setValidity in einem Controller in Angular
Dieses Tutorial zeigt, wie man $setValidity in einem Controller in Angular verwendet.
-
Erstellen Sie einen Controller mit dem Namen
HomeController. -
Importieren Sie die Module
$setValidityundFormsModule. -
Erstellen Sie eine Funktion namens
$setValidity(). Innerhalb dieser Funktion weisen wir den Wert von$setValiditymittrueoderfalsezu. -
Rufen Sie diese Funktion innerhalb des Ereignisses
ngOnInit()auf. Dadurch wird sichergestellt, dass die Angular-App bei der Initialisierung unsere Funktion$setValidity()aufruft.
Lassen Sie uns ein Beispiel für die Verwendung von $setValidity in Angular besprechen, indem Sie die oben genannten Schritte verwenden.
JavaScript-Code:
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 Quelltext:
<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>
Klicken Sie hier, um die Funktionsweise des obigen Codes zu überprüfen.
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