使用 ng-Show、ng-disabled 提交按钮时表单未关闭

Question

我正在尝试创建一个表单来添加新用户。在我填满所有文本框之前，提交按钮保持禁用状态。但是一旦我正确填写了所有文本框，它就会启用。

这就是问题所在。单击提交按钮后，用户被添加到表中，但表单没有关闭。文本框被清除，所有文本框都显示错误消息。

我还在head标签前添加了style-input.ng-invalid.ng-dirty{border:1px solid red;}。

<form name="addForm"class="form-horizontal" action="/action_page.php">

                            <div class="form-group">
                                <label class="control-label col-sm-2">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" required>
                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.required">Enter Email</span>
                                    <span ng-show="addForm.addEmail.$dirty && addForm.addEmail.$error.email">Invalid Email</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">First Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" required>
                                    <span ng-show="addForm.addFirstName.$dirty && addForm.addFirstName.$error.required">Enter First Name</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">Last Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" required>
                                    <span ng-show="addForm.addLastName.$dirty && addForm.addLastName.$error.required">Enter Last Name</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">Contact</label>
                                <div class="col-sm-10">
                                    <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" required>
                                    <span ng-show="addForm.addContact.$dirty && addForm.addContact.$error.required">Enter Contact</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-sm-2">Role</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" required>
                                    <span ng-show="addForm.addRole.$dirty && addForm.addRole.$error.required">Enter Role</span>
                                </div>
                            </div>                        

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button ng-disabled="addForm.$invalid" type="submit" class="btn btn-default" ng-click="saveUser()" data-dismiss="modal">Submit</button>
                                </div>
                            </div>
                        </form>
			<div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>

Answer 1

我会这样做：

1. 将我的表单放在一个 div 中

   <div class="contact-form">
       <form method="post" action="sendemail.php" id="contact-form">
           <!-- FORM CONTENT HERE -->
       </form>
   </div>
   

2. 然后，将其添加到您的脚本文件中（注意代码$('#contact-form').hide() 将在发布后隐藏您的表单）：

   //Contact Form Validation
   $('#contact-form').on('submit', function(event) {
       event.preventDefault();
       var $inputs = $('#contact-form :input');
   
       // not sure if you wanted this, but I thought I'd add it.
       // get an associative array of just the values.
       var data = {};
       $inputs.each(function() {
           data[this.name] = $(this).val();
       });
   
       $.ajax({
           url: '/send-mail',
           data: data,
           method: 'post'
       })
       .then(function success(res) {
            console.log('Success!');
            var s1 = document.getElementById('contact-title');
            s1.innerHTML = 'Form sent with success.';
            $('#contact-form').hide()
       })
       .catch(function error(err) {
            console.error(err);
            var s2 = document.getElementById('contact-title');
            s2.innerHTML = 'Errors sending your form...';
            $('#contact-form').hide()
       })
   });
   

希望你能在这里找到答案。