Use la función $setValidity en Angular

Muhammad Adil 23 mayo 2022
  1. el $setValidity en Angular
  2. Paso para usar $setValidity dentro de un controlador en Angular
Use la función $setValidity en Angular

El angular $setvalidity() es una función que establece la validez del campo de formulario dado. Esta función se puede utilizar tanto en el constructor como en otros métodos de controlador.

Este artículo mostrará cómo usar $setValidity dentro de un controlador. También mostrará cómo establecer la validez de la entrada en el lado del servidor antes de enviarla al lado del cliente.

el $setValidity en Angular

Angular proporciona una directiva llamada $setValidity, que puede establecer la validez de la entrada. Se usa dentro del controlador y no dentro de una vista.

La función $setValidity asigna un par clave/valor que puede usarse para validar la validez de un elemento de formulario.

La clave es única y el valor es verdadero o falso en este contexto. El valor específico se agrega a un objeto $error cuando se llama al método $setValidity, que puede usarse para verificar si un valor es aceptable o no.

La función $setValidity se puede utilizar de las siguientes formas:

  1. Establecer la validez de un formulario completo:

    $scope.$setValidity($scope.myForm, 'myFormIsValid');
    
  2. Establecer la validez de un campo:

    $scope.$setValidity($scope.myForm, 'fieldName', true);
    

Es importante tener en cuenta que la directiva $setValidity no afecta la validez de un campo de formulario. Simplemente establece la validez de un campo de formulario y su validador correspondiente.

Paso para usar $setValidity dentro de un controlador en Angular

Este tutorial demostrará cómo usar $setValidity dentro de un controlador en Angular.

  • Crear un Controlador con el nombre HomeController.
  • Importar los módulos $setValidity y FormsModule.
  • Crear una función llamada $setValidity(). Dentro de esta función, asignaremos el valor de $setValidity con true o false.
  • Llame a esta función dentro del evento ngOnInit(). Esto asegurará que cuando se inicialice la aplicación Angular, llamará a nuestra función $setValidity().

Analicemos un ejemplo de cómo usar $setValidity en Angular siguiendo los pasos mencionados anteriormente.

Código 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();
}]);

Código 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>

Haga clic aquí para comprobar el funcionamiento del código anterior.

Muhammad Adil avatar Muhammad Adil avatar

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

Artículo relacionado - Angular Function