programing

AngularJS는 컨트롤러에서 형식이 유효한지 확인합니다.

lastmoon 2023. 3. 18. 09:15
반응형

AngularJS는 컨트롤러에서 형식이 유효한지 확인합니다.

컨트롤러에서 양식이 유효한지 확인해야 합니다.

표시:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

내 컨트롤러:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

다음 오류가 나타납니다.

TypeError: Cannot read property '$valid' of undefined

이거 드셔보세요

표시:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

컨트롤러 내:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

또는

표시:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

컨트롤러 내:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};

컨트롤러를 다음과 같이 업데이트했습니다.

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

여기 또 다른 해결책이 있습니다.

html에 숨겨진 범위 변수를 설정하면 컨트롤러에서 사용할 수 있습니다.

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

다음으로 완전한 작업 예를 제시하겠습니다.

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:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>

BusinessCtrl초기화가 완료됩니다.createBusinessFormFormController만약 당신이 이 모든 것을 가지고 있다 해도ngController원하는 대로 되지 않을 거야어쩔 수 없습니다(고객님이 직접 작성하실 수 있습니다).ngControllerDirectivepriority를 속여 보겠습니다).이렇게 angularjs가 동작합니다.

다음 plnkr를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/20054055/angularjs-check-if-form-is-valid-in-controller

반응형