html页面上的AngularJS验证无效

Question

我必须创建 AngularJS 项目。在这里我有一个html页面名称是 addNewHost.html

我的 addNewHost.html 代码如下所示

<md-content class="md-padding" ng-controller="AddNewHostController as vm">
    <form name="hostForm" ng-submit="vm.AddNewHost($event)" novalidate>
        <md-content md-theme="dark" class="md-padding" layout="row" layout-sm="column">
            <md-input-container>
                <label>Hostame</label>
                <input ng-model="vm.service.hostname" required>
            </md-input-container>
            <md-input-container>
                <label>IP Address</label>
                <input ng-model="vm.service.ipaddress" required>
            </md-input-container>
            <md-input-container>
                <label>Alias</label>
                <input ng-model="vm.service.alias" required>
            </md-input-container>
        </md-content>
        <md-content class="md-padding">
            <div layout layout-sm="column">
                <md-input-container flex>
                    <input ng-model="vm.service.check_command" placeholder="Check Command" required>
                </md-input-container>
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.notification_period"
                        name="notification_period" required>
                        <option value="">Select notification period</option>
                        <option value="24x7">24x7</option>
                    </select>
                </md-input-container>
                <md-input-container flex>
                    <label>Max check attempts</label>
                    <input ng-model="vm.service.max_check_attempts" required name="max_check_attempts">
                </md-input-container>
            </div>
            <div layout layout-sm="column">
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.active_checks_enabled"
                        name="active_checks_enabled" required name="active_checks_enabled">
                        <option value="">Select active checks enabled</option>
                        <option value="1">On</option>
                        <option value="0">Off</option>
                        <option value="2">Skip</option>
                        <option value="3">Null</option>
                    </select>
                </md-input-container>
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.passive_checks_enabled"
                        name="passive_checks_enabled" required>
                        <option value="">Select passive checks enabled</option>
                        <option value="1">On</option>
                        <option value="0">Off</option>
                        <option value="2">Skip</option>
                        <option value="3">Null</option>
                    </select>
                </md-input-container>
                <md-input-container flex>
                    <md-checkbox name="chkRegister" ng-model="vm.service.register">Registered</md-checkbox>
                </md-input-container>
            </div>
            <div layout layout-sm="column">
                <md-input-container flex>
                    <input ng-model="vm.service.chIntervalInMinutes" placeholder="Check interval in minutes" required>
                </md-input-container>
                <md-input-container flex>
                    <input ng-model="vm.service.retryIntervalInMinutes" placeholder="Retry interval in minutes" required>
                </md-input-container>
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.contact_groups"
                        name="contact_groups" required>
                        <option value="">Select contact groups</option>
                        <option value="admins">admins</option>
                    </select>
                </md-input-container>
            </div>
            <div layout layout-sm="column">
                <md-input-container flex>
                    <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.check_period"
                        name="check_period" style="width:33%;" required>
                        <option value="">Select check period</option>
                        <option value="24x7">24x7</option>
                    </select>
                </md-input-container>
            </div>
            <button class="md-button md-ink-ripple" ng-class="hostForm.$valid ? 'active' : 'disable'" style="background-color:#7ec9c2; height: 12px; margin-top: 3%;">Add Host Service</button>
        </md-content>
    </form>
</md-content>

我的 AddNewHostController 控制器代码如下所示

(function(){
  angular
    .module('app')
    .controller('AddNewHostController', [
      AddNewHostController
    ]);

  function AddNewHostController() {
    var vm = this
    vm.AddNewHost = AddNewHost;

    function AddNewHost() {
      console.log(vm.service);
      if (vm.service == undefined) {
        return false;
      } else {
        console.log(vm.service);
      }
    }
  }
})();

我的问题是

当我点击我的提交按钮（添加主机服务）时，它将执行控制器而不检查验证。

简而言之，我的验证无效。

我还有一个问题是，当我点击“提交”按钮时，它不会验证我的所有下拉列表。

Answer 1

不确定你是怎么做的，但将它与下面的例子进行比较。

这也是一个有效的plunk。验证在插件中正常工作。

交叉检查您正在使用的所有版本。

var app = angular.module('simple', ['ngMaterial']);


app.controller("AddNewHostController", function($scope) {
  $scope.service = {};
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

  <link rel="stylesheet" href="style.css" />


  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="simple">
  <md-content class="md-padding" ng-controller="AddNewHostController as vm">
    <form name="hostForm" ng-submit="vm.AddNewHost($event)" novalidate="">
      <md-content md-theme="dark" class="md-padding" layout="row" layout-sm="column">
        <button class="md-button md-ink-ripple" ng-class="hostForm.$valid ? 'active' : 'disable'" style="background-color:#7ec9c2; height: 12px; margin-top: 3%;">Add Host Service</button>
        <md-input-container>
          <label>Hostame</label>
          <input ng-model="vm.service.hostname" required="" />
        </md-input-container>
        <md-input-container>
          <label>IP Address</label>
          <input ng-model="vm.service.ipaddress" required="" />
        </md-input-container>
        <md-input-container>
          <label>Alias</label>
          <input ng-model="vm.service.alias" required="" />
        </md-input-container>
      </md-content>
      <md-content class="md-padding">
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <input ng-model="vm.service.check_command" placeholder="Check Command" required="" />
          </md-input-container>
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.notification_period" name="notification_period" required="">
              <option value="">Select notification period</option>
              <option value="24x7">24x7</option>
            </select>
          </md-input-container>
          <md-input-container flex="">
            <label>Max check attempts</label>
            <input ng-model="vm.service.max_check_attempts" required="" name="max_check_attempts" />
          </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.active_checks_enabled" name="active_checks_enabled" required="">
              <option value="">Select active checks enabled</option>
              <option value="1">On</option>
              <option value="0">Off</option>
              <option value="2">Skip</option>
              <option value="3">Null</option>
            </select>
          </md-input-container>
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.passive_checks_enabled" name="passive_checks_enabled" required="">
              <option value="">Select passive checks enabled</option>
              <option value="1">On</option>
              <option value="0">Off</option>
              <option value="2">Skip</option>
              <option value="3">Null</option>
            </select>
          </md-input-container>
          <md-input-container flex="">
            <md-checkbox name="chkRegister" ng-model="vm.service.register">Registered</md-checkbox>
          </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <input ng-model="vm.service.chIntervalInMinutes" placeholder="Check interval in minutes" required="" />
          </md-input-container>
          <md-input-container flex="">
            <input ng-model="vm.service.retryIntervalInMinutes" placeholder="Retry interval in minutes" required="" />
          </md-input-container>
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.contact_groups" name="contact_groups" required="">
              <option value="">Select contact groups</option>
              <option value="admins">admins</option>
            </select>
          </md-input-container>
        </div>
        <div layout="" layout-sm="column">
          <md-input-container flex="">
            <select class="ng-pristine ng-valid md-input ng-empty ng-touched" ng-model="vm.service.check_period" name="check_period" style="width:33%;" required="">
              <option value="">Select check period</option>
              <option value="24x7">24x7</option>
            </select>
          </md-input-container>
        </div>
      </md-content>
    </form>
  </md-content>
</body>

</html>

Answer 2

首先，由于您使用的是角度材质，请检查官方页面上的error handling example：

• 确保已将ngMessages添加为项目的依赖项。
• 从HTML标记中移除手动添加的ng-pristine，ng-dirty，ng-valid类，这些类由Angular的验证机制自动添加。
• 然后检查您的输入是否可以检测到无效值并相应地更改其样式，如官方示例所示。

一旦你开始工作，下一步就是确保你没有启用提交按钮，除非表格有效。我看到您选择通过ng-class执行此操作，但我建议您使用ng-disabled指示here。

<button type="submit" class="md-button md-ink-ripple" ng-disabled="hostForm.$invalid">Add Host Service</button>

第三，您还可以在控制器内添加安全开关，如上面的相同链接所述。因此，修改表单标记如下：

<form name="hostForm" ng-submit="vm.AddNewHost(hostForm.$valid)" novalidate>

你的控制器方法进入

function AddNewHost(isDataValid) {
  if (isDataValid) {
    // add your host
  }
}