【发布时间】：2017-01-04 11:26:43
【问题描述】：
我必须创建 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);
}
}
}
})();
我的问题是
当我点击我的提交按钮（添加主机服务）时，它将执行控制器而不检查验证。
简而言之，我的验证不起作用。
我还有其他问题是，当我点击提交按钮时，它不会验证我的所有下拉列表。
【问题讨论】：
-
您尝试过从表单中删除 novalidate 吗？
-
@federicoscamuzzi 我不想显示 html 弹出窗口。我希望当我点击提交时，它会做所有空的所需文本框和红色下拉菜单。
-
你为什么说弹出？？？ ..我没有提到它..我建议你从你的
标签中删除 novalidate 指令..这样做： -
@federicoscamuzzi 如果我删除 novalidate ，它会向我显示 html 所需的弹出窗口和所需的输入。你明白我的意思了吗？
标签： angularjs