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

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>