在AngularJs中隐藏验证后的表单

Hide a form after validation in AngularJs

本文关键字:表单 验证 隐藏 AngularJs      更新时间:2023-09-26

我正在处理一个角度表单,这是我第一次使用角度表单。我能够成功提交表单。但我想再做两件事:

  1. 验证表单
  2. 如果有效,请隐藏表单,并显示带有确认的div

现在我可以使用ng-click&ng隐藏表单的属性。但我希望这种隐藏是基于验证的。我正在寻找验证电子邮件,通过min&最大长度&必需。

表单代码:

<form id="signup-form" ng-submit="processForm()" ng-hide="showConfirm" >
    <div class="col-md-12"><h4 class="col-md-12" >What do you think?</h4></div>
    <div class="form-group col-md-12">
    <div class="row">
        <div class="radio col-md-6">
            <label>
               <input type="checkbox" ng-model="formData.option1"  >
               Option1
            </label>
        </div>
        <div class="radio col-md-6">
            <label>
                <input type="checkbox" ng-model="formData.option2" >
                Option2
            </label>
        </div>
      </div>    
    </div>
<div class="col-md-12 contact">
    <h4 class="col-md-12" >Want us to contact you?</h4>
    <div class="form-group">
        <div class="textbox col-md-12">
            <label>Name </label>
               <input type="text" ng-model="formData.name" >
        </div>
        <div class="textbox col-md-12">
            <label>Email </label>
               <input type="text" ng-model="formData.email" >
        </div>
         <div class="textbox col-md-12">
            <label>Phone </label>
               <input type="text" ng-model="formData.phone" >
        </div>
    </div>    
    </div>
    <div class="form-group row">
    <div class="col-md-12 ">
         <div class="col-md-12 contact">
            <button type="submit" class="btn btn-primary" ng-click="showConfirm = ! showConfirm">Submit</button>
         </div>
    </div>
    </div>
</form>  
<div class="col-md-12 confirmation" ng-show="showConfirm">
    <h2 >Thanks alot for your feedback.</h1>
</div>

js代码:

$scope.processForm = function() {                            
   $http.post('http://localhost/api/node.json', $scope.formData)
       .success(function(data) {            
           $scope.formData = {};                
           $state.go('main.start');      
       });          
};

给表单一个名称,在提交时,使用$valid属性检查表单的有效性。

<form id="signup-form" name="signUpForm" novalidate ng-submit="signUpForm.$valid && processForm()" ng-hide="showConfirm">

将验证属性添加到输入中。例如:

<input type="text" ng-model="formData.email" required>

然后,提交表单后,将showConfirm属性设置为true

在此处阅读有关验证的更多信息https://docs.angularjs.org/guide/forms和http://www.ng-newsletter.com/posts/validations.html

应该可以使用类似于以下内容的方法。

HTML

<form name="signup-form" class="signup-form" novalidate method="post" ng-submit="processForm()" ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid" >
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control input-lg" name="username" placeholder="Username" ng-model="user.username" ng-required="true">
    <label>Email</label>
    <input type="email" class="form-control input-lg" name="email" placeholder="Email" ng-model="user.email" ng-maxlength="20" ng-minlength="10" ng-required="true">
  </div>
</form>
<div ng-hide="!signup-form.$invalid" ng-show="signup-form.$invalid">
</div>