如何在angularjs中单击或不单击验证链接

时间：2016-08-19 08:11:15

标签： javascript angularjs

我有一个表单，我正在通过角度消息验证所有输入标签，但点击该链接表单时会有一个链接被展开，但最初表单将被隐藏。

因此，如果用户点击提交按钮，他应该收到错误消息，请点击该链接以填写更多详细信息。

   <!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@4.0.0-alpha.2" 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="bootstrap@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script data-require="angular.js@1.5.8" 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.

2 个答案:

答案 0 :(得分：0)

您应该使用布尔变量来显示或隐藏警告消息。 我编辑了您的plunker，您可以在以下链接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="bootstrap@4.0.0-alpha.2" 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="bootstrap@4.0.0-alpha.2" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script data-require="angular.js@1.5.8" 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>

答案 1 :(得分：-1)

一个非常简单的解决方案是为表单命名，以便您可以引用它，然后调整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表单验证。

相关问题
最新问题