Проблема с проверкой AngularJS

0

У меня есть форма, которая, похоже, работает хорошо по большей части. Тем не менее, мои выборки немного разыгрываются, и я не могу представить форму. Моя форма выглядит

<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'];

Теперь проблема в том, что мой выбор по умолчанию (пожалуйста, выберите) имеет красную рамку вокруг них при загрузке страницы. Очевидно, это не должно появляться до тех пор, пока они не отправят форму без выбранной опции.

Во-вторых, если я предоставляю форму с действительными данными, кнопка отправки не станет активной. Как я могу сделать это активным?

Наконец, на данный момент все находится в одном контроллере. Должен ли я перемещать такие вещи, как выбор значений в свой собственный контроллер, и какой лучший способ достичь этого?

благодаря

  • 0
    Я не получаю красные границы: plnkr.co/edit/aaA69cMcGlC1GuTrX8sw?p=preview
  • 0
    Странно - я просто дважды проверил, и кажется, что я получаю только красную границу в Firefox.
Теги:

1 ответ

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню