如何验证链接是否被点击或不在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>

然后他应该提交扩展表格。

I have attached Plunker, on filing postcode and submitting the form it should ask me to click on address link to fill rest.

答

一个非常，非常简单的解决方案是给形式的名称，以便您可以参考它，然后捏捏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>

如何验证链接是否被点击或不在angularjs

相关推荐