Как подтвердить угловую форму после отправки?

Мне нужно создать форму с помощью угловых. Мне нужно использовать два вида проверки,Как подтвердить угловую форму после отправки?

Когда пользователь заполняет форму, мне нужно проверить, что поле на fly.This по умолчанию.
Я не хочу отключать кнопку отправки. Допустим, если пользователь заходит на страницу и нажимает на кнопку отправки, , то также я хочу показать всю ошибку в разных полях. Как это можно сделать. Я попытался использовать $ setValidity() Но не удалось. Как это можно сделать.

Это форму.

var sampleApp = angular.module("sampleApp", []); 
 

 
sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout', 
 
    function($scope, $http, $timeout) { 
 
    $scope.userData = { 
 

 
     fname: "", 
 
     lname: "" 
 
    }; 
 

 

 
    $scope.submitted = false; 
 
    $scope.submitForm = function(registrationForm) { 
 
     $scope.registrationForm.fname.$dirty = true; 
 
\t $scope.registrationForm.lname.$dirty = true; 
 
     if (registrationForm.$invalid) { 
 
     alert("form validation error."); 
 
     return; 
 
     } else { 
 
     alert("form submitted successfully."); 
 
     } 
 

 
    } 
 
    } 
 
]);

input.ng-invalid { 
 
\t \t \t border: 1px solid red; 
 
\t \t \t } 
 
\t \t \t input.ng-valid { 
 
\t \t \t border: 1px solid green; 
 
\t \t \t } 
 
\t \t \t input.ng-pristine { \t 
 
\t \t \t \t border-color: #FFFF00; 
 
\t \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> 
 
<script src="script.js"></script> 
 
<html ng-app="sampleApp"> 
 

 
<body ng-controller="sampleCtrl"> 
 
    <form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate> 
 
    FirstName* 
 
    <br> 
 
    <input type="text" name="fname" ng-model="userData.fname" required>&nbsp;&nbsp; 
 
    <span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required"> 
 
\t \t \t \t First name is required. 
 
\t \t \t </span> 
 

 
    <br>LastName* 
 
    <br> 
 
    <input type="text" name="lname" ng-model="userData.lname" required>&nbsp;&nbsp; 
 
    <span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required"> 
 
\t \t \t \t Last name is required. 
 
\t \t \t </span> 
 
    <br> 
 
    <br> 
 
    <input type="submit" value="Submit"> 
 
    </form> 
 
</body> 
 

 
</html>

источник

2014-11-30 Deepak Kumar Padhy

Вы можете использовать $ scope.myForm $ SetDirty(); для достижения такого поведения. –

простой способ сделать ваши формы валидация показать на форме представления, вы можете просто установить $scope.registrationForm.lname.$dirty = true; и $scope.registrationForm.fname.$dirty = true; в вашей $scope.submitForm функции.

Решение.

var sampleApp = angular.module("sampleApp", []); 
 
sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout', 
 
    function($scope, $http, $timeout) { 
 
    $scope.userData = { 
 
     fname: "", 
 
     lname: "" 
 
    }; 
 
    $scope.submitted = false; 
 
    $scope.submitForm = function(registrationForm) { 
 
     if (registrationForm.$invalid) { 
 
     alert("form validation error."); 
 
     $scope.registrationForm.lname.$dirty = true; 
 
     $scope.registrationForm.fname.$dirty = true; 
 
     return; 
 
     } else { 
 
     alert("form submitted successfully."); 
 
     } 
 

 
    } 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> 
 
<script src="script.js"></script> 
 
<html ng-app="sampleApp"> 
 

 
<body ng-controller="sampleCtrl"> 
 
    <form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate> 
 
    FirstName* 
 
    <br> 
 
    <input type="text" name="fname" ng-model="userData.fname" required>&nbsp;&nbsp; 
 
    <span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required">First name is required.</span> 
 
    <br>LastName* 
 
    <br> 
 
    <input type="text" name="lname" ng-model="userData.lname" required>&nbsp;&nbsp; 
 
    <span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required">Last name is required.</span> 
 
    <br> 
 
    <br> 
 
    <input type="submit" value="Submit"> 
 
    </form> 
 
</body> 
 

 
</html>

источник

2014-11-30 17:01:42 justinpinili

Как подтвердить угловую форму после отправки?

ответ

Смежные вопросы