Angularjs - 表单验证答案

【问题标题】：Angularjs - form validationAngularjs - 表单验证
【发布时间】：2014-12-30 07:56:17
【问题描述】：

我试图验证我的用户输入，它的工作原理是用户可以按下提交 btn，它会错误地输入缺少的输入字段，以便用户知道他缺少什么输入。

我的问题是它只有在我删除action="/buy" method="post" 时才有效，但我需要它在没有错误时正常提交表单。

我该怎么做？

我使用这个表单验证和 angularjs validate http://www.brentmckendrick.com/code/xtform/

<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>

<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
<label class="control-label" for="textinput">Fornavn <span class="star-color">*</span></label>
<input autocomplete="off" type="text" value="<?php echo set_value('fornavn'); ?>" name="fornavn" ng-model="fornavn" class="form-control" xt-validate required>
</div>

<button  id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>


</form>

【问题讨论】：

我不明白。在使用 Angular 构建的单页应用程序中，所有提交都是使用 AJAX 完成的。为什么要定期提交？
这是因为我在另一个需要提交的系统之上构建了 angularjs

标签： javascript angularjs forms

【解决方案1】：

您可以使用$http 服务向服务器发送任何类型的请求。当您实际执行表单发布数据时，会使用 content-type:'application/x-www-form-urlencoded' 发布数据。

对于您的请求，如果您可以设置正确的内容类型并编码对象以正确发送，它会起作用。请参阅我之前创建的这个小提琴，它将数据作为标准表单发送到服务器。

http://jsfiddle.net/cmyworld/doLhmgL6/

相关的 $http 请求看起来像

$scope.update = function (user) {
        $http({
            method: 'POST',
            url: 'https://mytestserver.com/that/does/not/exists',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            transformRequest: function (data) {
                var postData = [];
                for (var prop in data)
                postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
                return postData.join("&");
            },
            data: user
        });

【讨论】：

啊好主意！会试试的！我也需要有 transformRequest 功能吗？
表单 POST 发送的数据格式与 JSON 不同。所以 transformRequest 也在做同样的事情。它正在获取数据对象并将其转换为 x-www-form-urlencoded 格式。

【解决方案2】：

您可以对输入字段进行建模，并将每个字段委托给您的模型：

<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>

  <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
      <input autocomplete="off" type="text" name="fornavn" ng-model="fornavn.input1" class="form-control" xt-validate required>
   </div>
   <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn2.$invalid && !userForm.fornavn2.$pristine }">
      <input autocomplete="off" type="text" name="fornavn2" ng-model="fornavn.input2" class="form-control" xt-validate required>
   </div>
   <div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn3.$invalid && !userForm.fornavn3.$pristine }">
      <input autocomplete="off" type="text" name="fornavn3" ng-model="fornavn.input3" class="form-control" xt-validate required>
  </div>
  <button  id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>
</form>

在你的控制器中，使用$http发送数据：

    var baseUrl=<yourBaseUrl>;
    var url = baseUrl+'/buy';
    var data = $scope.fornavn;

    if(!$scope.userForm.$invalid){
      $http.post(url, data).
        success(function(data) {
          if (data.error_msg) {
              alert(data.error_msg);
          }else{
              alert("Successful! ");
          }
        }).
        error(function(data) {
          alert('error');
        });
      }

【讨论】：