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

86

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

전망:

<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

angularjs

— Rober
소스

컨트롤러 내에서 setBusinessInformation 함수를 감쌌습니까?

— matsko 2013

3

코드가 너무 단편화되어 무엇이 잘못 될 수 있는지 분석 할 수 없습니다. jsfiddle.net 또는 문제를 복제하는 plunker에서 간단한 데모를 만듭니다. 양식이 범위 내에 BusinessCtrl있습니까? 더 보지 않고는 말할 수 없습니다

— charlietfl

@matsko : 아니요. 컨트롤러 초기화시이 코드를 실행해야합니다.

— Rober

@charlietfl : 그 이상은 없습니다. 예제를 단순화하기 위해 일부 코드를 제거합니다. 예, 양식은 BusinessCtrl의 범위에 있어야합니다 (컨트롤러는 app.js의 경로에 설정되어 있습니다. 아래 답변에 솔루션을 추가합니다.하지만 왜 이런 식으로 작동하지 않는지 모르겠습니다.

— Rober

109

이 시도

보기 :

<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
  }
};

— 담소 리안
소스

양식에서 여러 단추의 유효성을 검사하려면 어떻게합니까?

— Fahad Mullaji 2015 년

이것은 나를 위해 일했지만 왜 $scope.formName.$valid결과가 정의되지 않았습니까?

— ps0604

ng-if를 사용하면 $ scope.formName. $ valid가 작동하지 않고 ng-show를 사용하면 $ scope.formName. $ valid가 작동합니다.

— Vaibhav Shaha

2

이것이 최선의 답이되어야합니다. 간단합니다. 그러나 잘못된 양식을 처리 할 수 있습니까? 잘못된 입력을 어떻게 사용자에게 보여줄 수 있습니까?

— Nicolas Leucci 16. 9.

1

@ ps0604은 formName.$valid당신이 좋아 그것을 위해 객체를 생성하는 데 필요한 컨트롤러에 액세스하려는 경우에만 템플릿에 액세스 할 수 $scope.forms.formName및 템플릿 : <form name="forms.formName"> 이 댓글 확인

— Damsorian

29

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

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

— Rober
소스

또한 기억하십시오-양식이 모달이면 양식 이름을 점 표기법 (예 : "data.theform")으로 선언하고 컨트롤러에서 $ scope.data.theform으로 액세스하십시오

— Jasper

2

이것은 나를 위해 작동하지 않습니다. 컨트롤러의 $ 범위에 'createBusinessForm'을 가져 오는 방법을 보여주세요.

— cyrf

$ scope 일이 사라졌습니다. 이제 우리는 vm접근 방식을 사용 하고 있습니다. 컨트롤러를 구문 접근 방식으로 사용하여 동일한 답변에 대한 플 런커를 만들 수 있습니까? 나는 그것을 할 수 없다. 오늘날의 맥락에서 답을 찾고있는 다른 사람들에게도 도움이 될 것입니다. 감사합니다

— ankitd

14

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

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>

스 니펫 확장

— Enkode
소스

4

은 BusinessCtrl전과 초기화됩니다 createBusinessForm의 FormController. ngController양식에있는 경우에도 원하는 방식으로 작동하지 않습니다. 당신은 이것을 도울 수 없습니다 (당신은 당신의ngControllerDirective 의을 만들고 우선 순위를 속일 .) 이것이 angularjs가 작동하는 방식입니다.

예를 들어 다음 plnkr을 참조하십시오. http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

— 올리버
소스