AngularJS验证问题

Question

我的表格在大多数情况下似乎运作良好。但是，我的选择正在播放，我似乎无法提交表格。我的表单看起来像

<form ng-submit="submit(emailform)" name="emailform" method="post" action="" class="form-horizontal emailType" role="form">
    <div class="form-group" ng-class="{ 'has-error': emailform.inputTitle.$invalid && submitted }">
        <label for="inputTitle" class="col-lg-4 control-label">Title</label>
        <div class="col-lg-8">
            <select ng-model="formData.inputTitle"  data-ng-options="title for title in titles" id="inputTitle" required>
                <option value="">Please select</option>
            </select>
        </div>
    </div>
    <div class="form-group" ng-class="{ 'has-error': emailform.inputName.$invalid && submitted }">
        <label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
        <div class="col-lg-8">
            <input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)" required>
        </div>
    </div>
    <div class="form-group" ng-class="{ 'has-error': emailform.inputLinks.$invalid && submitted }">
        <label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
        <div class="col-lg-8">
            <select ng-model="formData.inputLinks"  data-ng-options="link for link in links" id="inputLinks" required>
                <option value="">Please select</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
            <button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
                Send Message
            </button>
        </div>
    </div>
</form>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>

这是一个有两个选择和一个输入的简单形式。我的控制器如下所示

'use strict';

/* Controllers */

function EmailViewCtrl($scope, $http) {

    $scope.titles =
    [
        "Mr",
        "Mrs",
        "Miss",
        "Ms",
        "Dr"
    ];

    $scope.links =
    [
        "email1",
        "email2",
        "email3",
        "email4",
        "email5"
    ];

    $scope.result = 'hidden'
    $scope.resultMessage;
    $scope.formData; //formData is an object holding the name, email, subject, and message
    $scope.submitButtonDisabled = false;
    $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
    $scope.submit = function(emailform) {
        $scope.submitted = true;
        $scope.submitButtonDisabled = true;
        if (emailform.$valid) {
            $http({
                method  : 'POST',
                url     : 'backend/email.php',
                data    : $.param($scope.formData),  //param method from jQuery
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
            }).success(function(data){
                console.log(data);
                if (data.success) { //success comes from the return json object
                    $scope.submitButtonDisabled = true;
                    $scope.resultMessage = data.message;
                    $scope.result='bg-success';
                } else {
                    $scope.submitButtonDisabled = false;
                    $scope.resultMessage = data.message;
                    $scope.result='bg-danger';
                }
            });
        } else {
            $scope.submitButtonDisabled = false;
            $scope.resultMessage = 'Failed <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley">  Please fill out all the fields.';
            $scope.result='bg-danger';
        }
    }
}

EmailViewCtrl.$inject = ['$scope', '$http'];

现在的问题是，我选择他们的默认选项（请选择）在页面加载时周围有红色边框。显然，在没有选择选项的情况下提交表单之前，这不会出现。

其次，如果我向表单提供有效数据，则提交按钮似乎不会变为活动状态。我怎样才能激活它？

最后，目前，一切都在一个控制器中。我应该将选择值之类的东西移动到他们自己的控制器中，以及实现这一目标的最佳方法是什么？

由于

Answer 1

您可以使用form.input。$ dirty来检查是否触摸了输入，并且仅在这种情况下显示验证错误。

ng-class="{ 'has-error': emailform.inputName.$invalid && emailform.inputName.$dirty }"

请参阅下面的示例，了解代码的工作副本：

var app = angular.module("app", []);

app.controller("EmailViewCtrl", function EmailViewCtrl($scope, $http) {

  $scope.titles = [
    "Mr",
    "Mrs",
    "Miss",
    "Ms",
    "Dr"
  ];

  $scope.links = [
    "email1",
    "email2",
    "email3",
    "email4",
    "email5"
  ];

  $scope.result = 'hidden'
  $scope.resultMessage;
  $scope.formData; //formData is an object holding the name, email, subject, and message
  $scope.submitButtonDisabled = false;
  $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
  $scope.submit = function(emailform) {
    $scope.submitted = true;
    $scope.submitButtonDisabled = true;
    if (emailform.$valid) {
      alert("POST!");
    } else {
      $scope.submitButtonDisabled = false;
      $scope.resultMessage = 'Failed <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley">  Please fill out all the fields.';
      $scope.result = 'bg-danger';
    }
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="EmailViewCtrl">
  <form ng-submit="submit(emailform)" name="emailform" method="post" action="" class="form-horizontal emailType" role="form">
    <div class="form-group" ng-class="{ 'has-error': emailform.inputTitle.$invalid && emailform.inputTitle.$dirty }">
      <label for="inputTitle" class="col-lg-4 control-label">Title</label>
      <div class="col-lg-8">
        <select class="form-control" ng-model="formData.inputTitle" data-ng-options="title for title in titles" id="inputTitle" required>
          <option value="">Please select</option>
        </select>
      </div>
    </div>
    <div class="form-group" ng-class="{ 'has-error': emailform.inputName.$invalid && emailform.inputName.$dirty }">
      <label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
      <div class="col-lg-8">
        <input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)" required>
      </div>
    </div>
    <div class="form-group" ng-class="{ 'has-error': emailform.inputLinks.$invalid && emailform.inputLinks.$dirty }">
      <label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
      <div class="col-lg-8">
        <select class="form-control" ng-model="formData.inputLinks" data-ng-options="link for link in links" id="inputLinks" required>
          <option value="">Please select</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-offset-2 col-lg-10">
        <button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
          Send Message
        </button>
      </div>
    </div>
  </form>
  <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</div>