角自動表單提交與$ 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>

控制者

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

我想在if語句中插入表單提交代碼，但是即使表單輸入在頁面加載時為空，newValue始終顯示true。

試圖做這樣的事情http://jsfiddle.net/cmyworld/EdCEW/但不知道我要去哪里。

Answer 1

解決方案是創建一種方法來驗證所有字段，如果所有字段均有效，則將范圍變量設置為true。

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/