檢查所有的文本框是否有值

Question

新手在這裏..我試圖讓我的文本框的所有輸入值在一個單一的按鈕單擊。目前它工作正常，但是當我添加驗證代碼以查看是否沒有空文本框時，即使文本框不爲空也不會進入下一頁。我錯過了什麼？

這裏是我的controller.js代碼：

.controller('register1Ctrl', ['$scope', '$state', '$stateParams', 
'fnameProperty', 'mnameProperty', 'lnameProperty', 
'bdayProperty', 'emailProperty', 
function ($scope, $state, $stateParams, fnameProperty, mnameProperty, 
lnameProperty, bdayProperty, emailProperty) 
{ 


    $scope.goNextandSave = function(fname,mname,lname,bday,email) 
    { 
     if ($scope.fname != null && $scope.fname != "" 
     && $scope.mname !=null && $scope.mname !="" 
     && $scope.lname !=null && $scope.lname !="" 
     && $scope.bday !=null && $scope.bday !="" 
     && $scope.email !=null && $scope.email !="") 
     { 
      //do something 
     fnameProperty.setProperty(fname); 
     mnameProperty.setProperty(mname); 
     lnameProperty.setProperty(lname); 
     bdayProperty.setProperty(bday); 
     emailProperty.setProperty(email); 

     $state.go('register2'); 
     } 
     else 
     { 
     alert('Please complete the form.'); 
     } 

    } 

]) 

這裏是一個示例文本框的html代碼：

<label class="item item-input" id="register1-input1"> 
    <input type="text" placeholder="First Name" ng-model="fname"> 
    </label> 

Answer 1

選擇應該是有點不同的，根據我的方法。

在你<form>，添加ng-init="obj={}"。

在你的每一個文本框

然後，添加ng-model="obj.fname"，ng-model="obj.mname"等。

打電話給你的ng-submit在表單標籤提交功能。

使用required，看看是否所有文本框具有值。 和其他html5表單驗證也可以用於客戶端驗證。

如果你想自己的驗證功能，您可以使用角度驗證或者你甚至可以調用驗證在你的控制器提交功能。現在

，提交功能應被稱爲ng-submit="mySubmitFunction(obj)"。這將以JSON對象的形式將您的文本框的整個對象以表單的形式傳遞給您的控制器提交函數。因此你不必使用這麼多的範圍變量。

現在，如果您期待將數據提交給服務器，則可以將您在控制器功能中收到的此對象直接傳遞給工廠，然後通過$http請求傳遞給服務器。

這是最好的做法。

------------------------ UPDATE --------------------- ----

這裏是獲取表單數據到控制器的實現。

angular.module('myApp', []).controller('myCtrl', function($scope) { 
 

 
    $scope.doSubmit = function(x) { 
 
    console.log("Submitted Data", x); 
 
    } 
 
});

input { 
 
    display: block; 
 
    margin: 10px; 
 
} 
 

 
button { 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <form ng-init="obj = {}" ng-submit="doSubmit(obj)"> 
 
    <input type="text" ng-model="obj.fname" placeholder="First Name" required> 
 
    <input type="text" ng-model="obj.mname" placeholder="Middle Name" required> 
 
    <input type="text" ng-model="obj.lname" placeholder="Last Name" required> 
 
    <button type="submit">Submit</button> 
 

 
    </form> 
 

 
</div>