validar - AngularJS comprueba si la forma es válida en el controlador
validar formulario en angular (4)
Necesito verificar si un formulario es válido en un controlador.
Ver:
<form novalidate=""
name="createBusinessForm"
ng-submit="setBusinessInformation()"
class="css-form">
<!-- fields -->
</form>
En mi controlador:
.controller(
''BusinessCtrl'',
function ($scope, $http, $location, Business, BusinessService,
UserService, Photo)
{
if ($scope.createBusinessForm.$valid) {
$scope.informationStatus = true;
}
...
Me aparece este error:
TypeError: Cannot read property ''$valid'' of undefined
Aquí hay otra solución
Establezca una variable de ámbito oculto en su html y luego puede usarlo desde su controlador:
<span style="display:none" >{{ formValid = myForm.$valid}}</span>
Aquí está el ejemplo completo de trabajo:
angular.module(''App'', [])
.controller(''myController'', function($scope) {
$scope.userType = ''guest'';
$scope.formValid = false;
console.info(''Ctrl init, no form.'');
$scope.$watch(''myForm'', function() {
console.info(''myForm watch'');
console.log($scope.formValid);
});
$scope.isFormValid = function() {
//test the new scope variable
console.log(''form valid?: '', $scope.formValid);
};
});
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>
<form name="myForm" ng-controller="myController">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<tt>userType = {{userType}}</tt><br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
/*-- Hidden Variable formValid to use in your controller --*/
<span style="display:hidden" >{{ formValid = myForm.$valid}}</span>
<br/>
<button ng-click="isFormValid()">Check Valid</button>
</form>
</body>
</html>
He actualizado el controlador a:
.controller(''BusinessCtrl'',
function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
$scope.$watch(''createBusinessForm.$valid'', function(newVal) {
//$scope.valid = newVal;
$scope.informationStatus = true;
});
...
Prueba esto
en vista:
<form name="formName" ng-submit="submitForm(formName)">
<!-- fields -->
</form>
en el controlador:
$scope.submitForm = function(form){
if(form.$valid) {
// Code here if valid
}
};
o
en vista:
<form name="formName" ng-submit="submitForm(formName.$valid)">
<!-- fields -->
</form>
en el controlador:
$scope.submitForm = function(formValid){
if(formValid) {
// Code here if valid
}
};
BusinessCtrl se inicializa antes del FormController createBusinessForm . Incluso si tiene el ngController en el formulario, no funcionará de la manera que desee. No puedes evitarlo (puedes crear tu ngControllerDirective y tratar de engañar a la prioridad). Así es como funciona angularjs.
Vea este plnkr por ejemplo: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview