$ watchで有効にすると、自動フォームフォームが送信されます

Question

フォームが検証されると、自動的にフォームを送信しようとしています。

HTML

<form name="myForm" role="form" novalidate> 
     <div class="form-group"> 
      <select class="form-control" name="location" ng-model='calc.location1' required> 
       <option value=7>Location1</option> 
       <option value=9>Location2</option> 
       <option value=5>Location3</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <input class="form-control" type='number' name="Size" ng-model='calc.Size' placeholder="Sq ft" required> 
     </div> 
     <div class="form-group"> 
      <input class="form-control" type='number' name="units" ng-model='calc.units' placeholder="Units in kWH" required> 
     </div> 
</form> 

コントローラー、私は私のフォームは、if文の内側にコードを提出挿入したいのですが、newValueは常にフォームの入力が空の場合であっても、真見せている

myapp.controller('demoController', ['$scope', function($scope, $document) { 
    $scope.$watch('myForm.units.$valid', function (newValue, oldvalue){ 
     if(newValue) { 
      console.log(newValue); 
     } 
    })  
}]) 

ページ読み込み時。

http://jsfiddle.net/cmyworld/EdCEW/のようなことをしようとしていますが、どこが間違っているのかわかりません。

Answer 1

解決策は、すべてのフィールドが有効である場合、すべてのフィールドを検証し、有効範囲変数をtrueに設定する1つのメソッドを作成することです。

var app = angular.module('myApp', []); 
app.controller('myController',['$scope',function($scope) { 
$scope.checked = 0; 
$scope.$watch('myForm.$valid', function (newValue, oldvalue){ 
$scope.checkDirty(); 

    if($scope.checked === 1) 
    {   alert('Model is valid'); 
      //Can do a ajax model submit. 
     } 

    }); 
    $scope.checkDirty = function(){ 

    if($scope.myForm.Size.$valid && $scope.myForm.units.$valid) 
     { 
      $scope.checked = 1; 
     } 
     else 
     { 
      $scope.checked =0; 
     } 
}; 
}]); 

はここhttp://jsfiddle.net/EdCEW/92/