我试图这样做但是边框颜色变成红色，即使我在输入字段中键入一个字母，并且在输入有效之前不会正常。 我希望在无效输入时将边框颜色变为红色，但在该文本框外部单击后。 请提供一些解决方案。
<html>
<head>
<style>
input.ng-invalid.ng-dirty{border:1px solid red;}
textarea.ng-invalid.ng-dirty{border:1px solid red;}
/*button{width: 100px;height: 30px;}*/
</style>
</head>
<body>
<div ng-controller="myCtrl" class="form-contact-in">
<form name="frm" ng-submit="submit(frm.$valid)">
<input name="name"
type="text"
ng-model="user.name"
placeholder="Name"
ng-minlength="3"
ng-maxlength="15"
class="contactusform"
required>
<span ng-show="frm.name.$dirty && frm.name.$error.required">Name Required</span>
<span ng-show="frm.name.$dirty && frm.name.$error.minlength">too short</span>
<span ng-show="frm.name.$dirty && frm.name.$error.maxlength">too long</span><br>
<input name="email"
type="email"
ng-model="user.email"
placeholder="Email"
class="contactusform"
required>
<span ng-show="frm.email.$dirty && frm.email.$error.required">Email Required</span>
<span ng-show="frm.email.$dirty && frm.email.$error.email">Enter a valid email</span><br>
<input type="number"
placeholder="Phone Number"
name="mobile"
ng-model="user.mobile"
ng-pattern="mobRegex"
ng-minlength="10"
class="contactusform"
required>
<span ng-show="frm.mobile.$dirty && frm.mobile.$error.required">required</span>
<span ng-show="frm.mobile.$dirty && frm.mobile.$error.number">required</span>
<span ng-show="frm.mobile.$dirty && frm.mobile.$error.pattern">Required a valid mobile no.</span><br>
<textarea name="message"
cols="20"
rows="4"
placeholder="Message"
class="contactusform"
ng-model="user.message"
ng-minlength="5"
required>
</textarea>
<span ng-show="frm.message.$dirty && frm.message.$error.required">required</span>
<span ng-show="frm.message.$dirty && frm.message.$error.minlength">at least 5 chars needed</span><br>
<div class="buttonsec2contactpage">
<button type="submit" class="button-contactform2">SEND</button>
</div>
<p id="contactSubmitMessage">
</p>
</form>
</div>
<script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.mobRegex=/^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/;
$scope.submit=function(){
console.log("mobile"+ $scope.user.mobile);
};
});
</script>
</body>
</html>
答案 0 :(得分：1)
验证字段时需要确保输入具有以下所有属性：
永远是：
nameOfTheForm.nameOfTheInput.$error.typeOfInput
以下内容适用于您的案例：
(nameOfTheForm.nameOfTheInput.$valid.typeOfInput && nameOfTheForm.nameOfTheInput.$touched)
Angular Docs for forms - 查看自定义模型更新触发器和自定义验证
以下是一个例子：
function exampleController($scope) {
$scope.email = '';
}
angular
.module('example', [])
.controller('exampleController', exampleController);.error {
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
<div class="container" ng-controller="exampleController">
<form name=example>
<input
type="email"
name="email"
placeholder="type to get started"
ng-model="email"
ng-focus="example.email.$setUntouched()"
ng-class="{'error': example.email.$error.email}"
ng-model-options="{ updateOn: 'blur' }"/>
<p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>
<p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>
</form>
</div>
</div>
希望它有所帮助，快乐编码！
编辑：添加以下行以重新验证焦点上的输入。
ng-focus="example.email.$setUntouched()"
并将＆语句添加到错误消息的ng-show中。
example.email.$error.email && example.email.$touched
编辑：有条件地显示表单（您仍然需要更改formTwo的模型和绑定，以便它们不会相互覆盖）
function exampleController($scope) {
$scope.email = '';
$scope.formOne = true;
$scope.showFormTwo = function() {
$scope.formOne = !$scope.formOne;
};
}
angular
.module('example', [])
.controller('exampleController', exampleController);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div class="container-fluid" ng-app="example">
<div class="container" ng-controller="exampleController">
<button ng-click="showFormTwo()">Change form</button>
<div class="formOne" ng-if="formOne">
<h1>Form One</h1>
<form name=example>
<input type="email" name="email" placeholder="form one, type to get started" ng-model="email" ng-focus="example.email.$setUntouched()" ng-class="{'error': example.email.$error.email}" ng-model-options="{ updateOn: 'blur' }" />
<p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>
<p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>
</form>
</div>
<div class="formTwo" ng-if="!formOne">
<h1>Form Two</h1>
<form name=example>
<input type="email" name="email" placeholder="form two, type to get started" ng-model="email" ng-focus="example.email.$setUntouched()" ng-class="{'error': example.email.$error.email}" ng-model-options="{ updateOn: 'blur' }" />
<p ng-show="example.email.$valid && example.email.$touched">All good here!!!</p>
<p ng-show="example.email.$error.email && example.email.$touched">Now error is show! :)</p>
</form>
</div>
</div>
</div>