如何验证链接是否被点击或不在angularjs
问题描述:
我有一个表单,我通过角度消息验证所有输入标签,但有一个链接点击该链接表单会得到扩展,但最初表单会被隐藏。如何验证链接是否被点击或不在angularjs
所以,如果用户点击提交按钮,他应该得到一个错误说,请点击链接填写更多的细节。
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="[email protected]" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script data-require="[email protected]" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="myContoller">
<div class="row">
<div class="col-xs-12">
<form role="form" name="memberForm" ng-submit="submitMemberForm()" novalidate="">
<div class="form-group" ng-class="{'has-error':(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid}">
<label for="userName" ng-hide="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid ">User Name</label>
<label class="help-block" ng-messages="memberForm.loginName.$error" ng-show="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid">
<p ng-message="required">User name is required.</p>
<p ng-message="maxlength">maxlength</p>
<p ng-message="minlength">minlength</p>
</label>
<input type="text" class="form-control " ng-minlength="4" ng-maxlength="10" id="userName" name="loginName" ng-model="login.name" required/>
</div>
<div class="form-group" ng-class="{ 'has-error' : memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted) }">
<label for="PostCode" class="" ng-hide="memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted)">Postcode*<a style="margin-left:20px;" href="" ng-click="ShowHide()">Address Search</a></label>
<label class="help-block" ng-show="memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted)">Postcode is a mandatory field</label>
<input type="text" name="postcode" class="form-control " ng-model="postcode" ng-maxlength="9" required>
</div>
<div ng-show="IsVisible">
<div class="form-group" ng-class="{ 'has-error' : memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)}">
<label for="Contact address" class="" ng-hide="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address*</label>
<label class="help-block" ng-show="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address is required</label>
<div class="clearfix">
<select name="address" id="address" ng-model="user.address" class="form-control " required>
<option value="0">Address 1</option>
<option value="1">Address 2</option>
<option value="2">Address 3</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : memberForm.town.$invalid && (memberForm.town.$touched || memberForm.$submitted)}">
<label for="Town" class="" ng-hide="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)">Town*</label>
<label class="help-block" ng-show="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)"> Town is a mandatory field</label>
<input type="text" name="town" class="form-control " ng-model="user.town" required>
</div>
<div class="form-group" ng-class="{ 'has-error' : memberForm.country.$invalid && (memberForm.country.$touched || memberForm.$submitted)}">
<label for="Country" class="" ng-hide="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)">Country*</label>
<label class="help-block" ng-show="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)"> Country is a mandatory field</label>
<input type="text" name="country" class="form-control " ng-model="user.country" required>
</div>
</div>
<div class="form-group">
<button type="submit" name="sbt" class="btn-success btn">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
然后他应该提交扩展表格。
答
一个非常,非常简单的解决方案是给形式的名称,以便您可以参考它,然后捏捏ng-click
只有形式是有效的火:
<form name="myform">
<input type="text" ng-model='name' ng-required="true" />
<button ng-click="myform.$valid && preview()">Preview</button>
<button ng-click="myform.$valid && update()">Update</button>
</form>
叉形小提琴:https://jsfiddle.net/r8d1uq0L/
我喜欢从视图分离验证(业务关注),为此我创建了egkyron,它允许您在代码中定义模型约束并使用编程验证以及标准的Angular表单验证。
答
您应该使用布尔变量来显示或隐藏警告消息。 我编辑你的运动员,你可以在以下链接PLUNKR找到它。
$scope.showErrorMsg
是一个布尔变量,以帮助保持跟踪,如果显示或隐藏错误消息。
$scope.IsVisible
用于跟踪用户是否点击链接并填写所有必填字段。如果所有字段都填满并且用户单击该链接,则显示div并且错误消息消失。
// Code goes here
angular.module('myApp', ['ngMessages'])
.controller('myContoller', function ($scope) {
$scope.showErrorMsg = false;
$scope.ShowHide = function() {
if($scope.postcode) {
//If DIV is hidden it will be visible
$scope.IsVisible = true;
$scope.showErrorMsg = false;
}
}
$scope.submitMemberForm=function(){
if (!$scope.IsVisible){
// display error message
$scope.showErrorMsg = true;
return;
}
$scope.submitMemberForm.$submitted=true;
if($scope.memberForm.$valid){
alert("Success");
}
}
});
/* Styles go here */
.has-error .help-block{
color:red;
font-weight:bold;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="[email protected]" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script data-require="[email protected]" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="myContoller">
<div class="row">
<div class="col-xs-12">
<form role="form" name="memberForm" ng-submit="submitMemberForm()" novalidate="">
<div class="form-group" ng-class="{'has-error':(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid}">
<label for="userName" ng-hide="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid ">User Name</label>
<label class="help-block" ng-messages="memberForm.loginName.$error" ng-show="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid">
<p ng-message="required">User name is required.</p>
<p ng-message="maxlength">maxlength</p>
<p ng-message="minlength">minlength</p>
</label>
<input type="text" class="form-control " ng-minlength="4" ng-maxlength="10" id="userName" name="loginName" ng-model="login.name" required/>
</div>
<div class="form-group" ng-class="{ 'has-error' : memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted) }">
<label for="PostCode" class="" >Postcode*<a style="margin-left:20px;" href="" ng-click="ShowHide()">Address Search</a></label>
<label class="help-block" ng-show="memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted)">Postcode is a mandatory field</label>
<input type="text" name="postcode" class="form-control " ng-model="postcode" ng-maxlength="9" required>
</div>
<div ng-show="IsVisible">
<div class="form-group" ng-class="{ 'has-error' : memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)}">
<label for="Contact address" class="" ng-hide="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address*</label>
<label class="help-block" ng-show="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address is required</label>
<div class="clearfix">
<select name="address" id="address" ng-model="user.address" class="form-control " required>
<option value="0">Address 1</option>
<option value="1">Address 2</option>
<option value="2">Address 3</option>
</select>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : memberForm.town.$invalid && (memberForm.town.$touched || memberForm.$submitted)}">
<label for="Town" class="" ng-hide="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)">Town*</label>
<label class="help-block" ng-show="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)"> Town is a mandatory field</label>
<input type="text" name="town" class="form-control " ng-model="user.town" required>
</div>
<div class="form-group" ng-class="{ 'has-error' : memberForm.country.$invalid && (memberForm.country.$touched || memberForm.$submitted)}">
<label for="Country" class="" ng-hide="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)">Country*</label>
<label class="help-block" ng-show="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)"> Country is a mandatory field</label>
<input type="text" name="country" class="form-control " ng-model="user.country" required>
</div>
</div>
<label class="help-block" ng-show="showErrorMsg">Please click the link</label>
<div class="form-group">
<button type="submit" name="sbt" class="btn-success btn">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>