在AngularJs中验证后隐藏表单答案

【问题标题】：Hide a form after validation in AngularJs在AngularJs中验证后隐藏表单
【发布时间】：2014-10-02 16:25:15
【问题描述】：

我正在研究 Angular 表单，这是我第一次使用 Angular 表单。我能够成功提交表格。但我还想做两件事：

验证表单。
如果有效则隐藏表单并显示div 并确认。

现在可以使用表单的 ng-click 和 ng-hide 属性隐藏表单。但我希望这种隐藏基于验证发生。我正在寻找验证电子邮件，按最小和最大长度和要求。

表格代码：

<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');      
       });          
};

【问题讨论】：

标签： javascript angularjs forms validation

【解决方案1】：

为您的表单命名，然后在 ng-submit 上使用 $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

【讨论】：

【解决方案2】：

类似下面的东西应该可以工作。

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>

【讨论】：