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

以下是将表单数据提供给控制器的实现。

＆＃13;

angular.module('myApp', []).controller('myCtrl', function($scope) {

  $scope.doSubmit = function(x) {
    console.log("Submitted Data", x);
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: