AngularJS - 유효성 검사 후 프로그래밍 방식으로 양식 제출

Question

저는 최근 AngularJS 1.6에서 작업하기 시작했습니다.

프로그래밍 방식으로 양식을 제출하려고합니다. 그 이유는 몇 가지 필드 (필수 필드 유효성 확인)의 유효성을 검사하기 위해서입니다. 나는이 작업을하기 위해 많은 노력 (아마 3-4 시간)을 보냈지 만 스택 오버 플로우 나 AngularJS 문서에 대한 기존 답변은 오늘 (이상한) 나를 위해 일하는 것 같지 않으므로 최후의 수단으로 게시하고 있습니다. .

아래는

<form method="post" id="loginform" name="loginform" ng-submit="loginUser()" novalidate> 
    <div> 
     {{message}} 
    </div> 
    <div> 
     <label>User Name</label> 
     <input type="text" id="txtUserName" ng-model="user.UserName" name="user.UserName" /> 
    </div> 
    <div> 
     <label>Password</label> 
     <input type="text" id="txtPassword" ng-model="user.Password" name="user.Password" /> 
    </div> 
    <div> 
     <input type="submit" id="btnLogin" title="Save" name="btnLogin" value="Login" /> 
    </div> 
</form> 

내 각 코드 나 오류 'ATTR'을 받고 계속

var demoApp = angular.module('demoApp', []); 

demoApp.controller("homeController", ["$scope", "$timeout", function ($scope, $timeout) { 

    $scope.loginUser = function() { 

     var form = document.getElementById("loginform"); 
     //var form = $scope.loginform; - tried this here... 
     //var form = $scope["#loginform"]; tried this 
     //var form = angular.element(event.target); - tried this... 
     // tried a lot of other combinations as well... 

     form.attr("method", "post"); 
     form.attr("action", "Home/Index"); 
     form.append("UserName", $scope.user.UserName); 
     form.append("Password", $scope.user.Password); 
     form.append("RememberMe", false); 
     form.submit(); 
    }; 
}]); 

내 html로하는 함수가 아닙니다.

저는 값이있는 post 메소드를 사용하여 양식을 제출해야합니다. 그 직전에 제출 요청을 가로 채고 유효성 검사를 확인하려고합니다.

다른 방법을 시도해 볼 수 있습니다. 입력 유형을 submit에서 button으로 변경하는 경우. 폼 외부에 입력 배치. 유효성 확인과 제출 둘 다 어떤 방법 으로든 발생할 수 있다면 나는 행복 할 것입니다. 클라이언트 측에서 유효성을 검사 한 후 값을 다시 게시하면 서버가 리디렉션을 처리합니다.

참고 : 양식을 다른 양식으로 리디렉션 할 수 있도록 전체 포스트 백을 수행해야합니다. (나는 Ajax를 사용할 수 있습니다 알고 있지만, 다른 날 수 있습니다!) 검증 complate하지 버튼을

<form method="post" id="loginform" name="loginform" ng-submit="loginUser()" novalidate> 
<div> 
    {{message}} 
</div> 
<div> 
    <label>User Name</label> 
    <input type="text" id="txtUserName" required ng-model="user.UserName" name="UserName" /> 
</div> 
<div> 
    <label>Password</label> 
    <input type="text" id="txtPassword" ng-model="Password" name="user.Password"required /> 
</div> 
<div> 
    <input type="submit" ng-disabled="myForm.UserName.$invalid || myForm.Password.$invalid" id="btnLogin" title="Save" name="btnLogin" value="Login" /> 
</div> 
</form> 

Answer 1

내가 찾던 것을 발견했습니다. 결국에는 유효성을 확인한 다음 제출하라는 지시문을 작성해야했습니다. 그래서 나는 그것을 전체 대답으로 여기에 올리고있다. 에 대한

내 HTML

<div ng-controller="homeController" ng-init="construct()">  
    <form method="post" action="Index" role="form" id="loginform" name="loginform" ng-form-commit novalidate class="ng-pristine ng-invalid ng-invalid-required"> 
     <div class="form-group"> 
      <label for="UserName">User ID</label> 
      <input autocomplete="off" class="form-control ng-valid ng-touched ng-pristine ng-untouched ng-not-empty" 
        id="UserName" name="UserName" ng-model="user.UserName" type="text" value="" 
        ng-change="userNameValidation = user.UserName.length == 0"> 
      <span class="field-validation-error text-danger" ng-show="userNameValidation">The User ID field is required.</span> 
     </div> 

     <div class="form-group"> 
      <label for="Password">Password</label> 
      <input autocomplete="off" class="form-control ng-valid ng-touched ng-pristine ng-untouched ng-not-empty" 
        id="Password" name="Password" ng-model="user.Password" type="password" value="" 
        ng-change="passwordValidation = user.Password.length == 0"> 
      <span class="field-validation-error text-danger" ng-show="passwordValidation">The Password field is required.</span> 
     </div> 

     <div> 
      <input type="button" id="btnLogin" title="Login" name="btnLogin" value="Login" ng-click="validateUser(loginform)" /> 
     </div> 
    </form> 
</div> 

봐 폼 요소에를 NG-형태는 커밋. 그것은 제가 작성한 지시어입니다.

var demoApp = angular.module('demoApp', []); 

demoApp.factory("commonService", function() { 
    return { 
     isNullOrEmptyOrUndefined: function (value) { 
      return !value; 
     } 
    }; 
}); 

//This is the directive that helps posting the form back... 
demoApp.directive("ngFormCommit", [function() { 
    return { 
     require: "form", 
     link: function ($scope, $el, $attr, $form) { 
      $form.commit = function() { 
       $el[0].submit(); 
      }; 
     } 
    }; 
}]); 

demoApp.controller("homeController", ["$scope", "commonService", function ($scope, commonService) { 

    $scope.construct = function construct() { 
     $scope.user = { UserName: "", Password: "" }; 
    }; 

    $scope.userNameValidation = false; 
    $scope.passwordValidation = false; 
    $scope.isFormValid = false; 

    $scope.validateUser = function ($form) { 
     $scope.isFormValid = true; 

     $scope.userNameValidation = commonService.isNullOrEmptyOrUndefined($scope.user.UserName); 
     $scope.passwordValidation = commonService.isNullOrEmptyOrUndefined($scope.user.Password); 

     $scope.isFormValid = !($scope.userNameValidation || $scope.passwordValidation); 

     if ($scope.isFormValid === true) { 
      $scope.loginUser($form); 
     } 
    }; 

    $scope.loginUser = function ($form) { 
     $form.commit(); 
    }; 
}]); 

내 각도 코드는 내가 각도 1.5 구성 요소를 사용하여 지침을 here

Answer 2

양식에 액세스하십시오 (예 : $scope.loginform). 하지만 ...... ...... 메시지를보세요. 양식과 NG-메시지를 사용을 Heres 예 :

<form id="loginform" name="loginform" ng-submit="loginUser()"> 
    <div> 
     {{message}} 
    </div> 
    <div> 
     <label>User Name</label> 
     <input type="text" id="txtUserName" ng-model="user.UserName" name="user.UserName" required/> 
     <div class="help-block" ng-messages="loginform.txtUserName.$error" ng-show="loginform.txtUserName.$touched"> 
      <p ng-message="required">Username is required.</p> 
     </div> 
    </div> 
    <div> 
     <label>Password</label> 
     <input type="text" id="txtPassword" ng-model="user.Password" name="user.Password" required/> 
     <div class="help-block" ng-messages="loginform.txtPassword.$error" ng-show="loginform.txtPassword.$touched"> 
      <p ng-message="required">Password is required.</p> 
     </div> 
    </div> 
    <div> 
     <input type="submit" id="btnLogin" title="Save" name="btnLogin" value="Login" ng-click="loginUser()" /> 
    </div> 
</form> 

이 ngMessages을 추가 :

var demoApp = angular.module('demoApp', ['ngMessages']); 

demoApp.controller("homeController", ["$scope", "$timeout", function ($scope, $timeout) { 

    $scope.loginUser = function() { 
     if($scope.loginform.$valid){ 
     //Code to run before submitting (but not validation checks) 
     } else{ 
     return false; 
    } 
    }; 
}]); 

앱 선언에 ngMessages을 포함하는 것을 잊지하고 ngMessages.js 스크립트 파일을 포함하지 마십시오. HTML5 유효성 검사기를 사용하는 방법에 유의하십시오.

Answer 3

를 사용하지 않는하려고 할 때 $ 범위를 사용하는 경우는이 유효성 검사 코드가

Answer 4

첫 번째로 수행하지 마십시오 var form = document.getElementById("loginform");. form.submit을 사용하는 대신 다음 코드를 사용할 수 있습니다. 각도 방식으로 환호합니까 : D

$scope.loginUser = function() { 
    if($scope.loginform.$valid){ 
     user.rememberme=false; 

     $http({ 
     url: 'Home/Index', 
     method: "POST", 
     data: user 
    }) 
    .then(function(response) { 
     // success 
    }, 
    function(response) { // optional 
     // failed 
    }); 

    } 
}; 

Answer 5

예를 발견했다.

(function(angular) { 
    'use strict'; 

    function DemoFormCtrl($timeout, $sce) { 
    var ctrl = this; 
    this.$onInit = function() { 
     this.url = $sce.trustAsResourceUrl(this.url); 
     /*$timeout(function() { 
     ctrl.form.$$element[0].submit(); 
     });*/ 
    }; 

    this.validate = function(ev) { 
     console.log('Running validation.'); 
     if (!this.form) { 
     return false; 
     } 
    }; 
    } 

    angular.module('app', []) 
    .component('demoForm', { 
     template: ` 
     <p>To run this demo allow pop-ups from https://plnkr.co</p> 
     <hr> 
     <p>AngularJS - submit form programmatically after validation</p> 
     <form name="$ctrl.form" method="get" target="blank" action="{{::$ctrl.url}}" novalidate 
     ng-submit="$ctrl.validate($event)"> 
     <input type='hidden' name='q' ng-value='::$ctrl.value'> 
     <input type='hidden' name='oq' ng-value='::$ctrl.value'> 
     <input type="submit" value="submit..."> 
     </form>`, 
     controller: DemoFormCtrl, 
     bindings: { 
     url: '<', 
     value: '<' 
     } 
    }); 

})(window.angular); 

https://plnkr.co/edit/rrruj6vlWrxpN3od9YAj?p=preview