提交表单后如何使用“加载”更改按钮文本，以及在提交角度后如何重置表单

Question

 var app = angular.module('snc', []); app.controller('contactForm', function($scope, $http) { $scope.user = {}; $scope.submitForm = function() { $http({ method: 'POST', url: 'php-form/form.php', data: $scope.user, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .success(function(data) { console.log(data); if (!data.success) { if ($scope.errorName = data.errors.name) { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-warning'); $(".Message-txt").text(data.errors.name); } else if ($scope.errorMobile = data.errors.mobile) { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-warning'); $(".Message-txt").text(data.errors.mobile); } else if (data.errors.email == 'fail') { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-warning'); $(".Message-txt").text('Sorry, Failed to send E-mail.'); } else { $(".alert-set").removeClass('alert-warning'); $(".alert-set").removeClass('alert-success'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-dnager'); $(".Message-txt").text('somthing went wrong please try again.'); } } else { $(".alert-set").removeClass('alert-danger'); $(".alert-set").removeClass('alert-warning'); $(".alert-set").fadeIn(1000); $(".alert-set").removeClass("hide"); $(".alert-set").fadeOut(5000); $(".alert-set").addClass('alert-success'); $(".Message-txt").text(data.message); this.submitForm = {}; } }); }; }); 

 <form name="queryForm" ng-submit="submitForm()" novalidate> <div class="form-group"> <label for="Name">Name:<span class="text-danger">*</span></label> <input type="text" class="form-control" ng-model="user.name" id="name" placeholder="Enter Your Name"> </div> <div class="form-group"> <label for="Mobile">Mobile:<span class="text-danger">*</span></label> <input type="number" class="form-control" ng-model="user.mobile" id="mobile" placeholder="Enter Your Mobile Number"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" ng-model="user.email" id="email" placeholder="Enter Your Email"> </div> <div class="form-group"> <label for="Message">Message:</label> <textarea type="text" class="form-control" ng-model="user.message" id="name" placeholder="Enter Your Message" rows="4"></textarea> </div> <button type="submit" class="btn btn-snc">Submit</button> <div class="alert alert-dismissible alert-set"> <strong class='Message-txt'></strong> </div> </form> 

我有一个简单的联系表单，它必须将查询数据发送到php页面，我想在提交表单后禁用按钮并更改按钮文本，并在提交后重置完整表单。 我尝试过，但总是会遇到某种角度误差。 您能帮我解决它吗？如果您是Angular Developer，那么可以请您检查此表格，并告诉我是否需要更改。

Answer 1

分配不是比较：

$scope.errorName = data.errors.name ;

…是一个分配，意味着：将data.errors.name放入$scope.errorName变量中。

$scope.errorName == data.errors.name 

…是一个比较，它意味着： data.errors.name等于$scope.errorName 。

如果您使用分配而不是比较，则结果将始终为true，只要该值是true即可。

所以：

if ( a = 1 ) { /* always true */ }

if ( a == 1 ) { /* true only if `a` is equal to 1 */

if ( a === 1 ) { /* true only if `a` is strictly equal to 1 */

if ( a = "false" ) { /* always true (a string not empty is true) */ }

if ( a == "false" ) { /* true only if `a` is equal to "false" */

if ( a === "false" ) { /* true only if `a` is strictly equal to "false" */

严格上面的意思是同一类型 。 例如：

1 == "1"  // => true

1 === "1" // => not true. The Former is a Number, the latter is 
          //    a String.

Answer 2

要重置表格，您可以使用以下方法：

（注意：您有两个name ID。页面上的ID应该是UNIQ）。

 function onSubmit() { $('#submit_button').text('Loading…'); resetForm(); } function resetForm() { for(let id of ['name','mobile','email', 'message']) { $("#"+id).val(''); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="queryForm" ng-submit="submitForm()" novalidate> <div class="form-group"> <label for="Name">Name:<span class="text-danger">*</span></label> <input type="text" class="form-control" ng-model="user.name" id="name" placeholder="Enter Your Name"> </div> <div class="form-group"> <label for="Mobile">Mobile:<span class="text-danger">*</span></label> <input type="number" class="form-control" ng-model="user.mobile" id="mobile" placeholder="Enter Your Mobile Number"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" ng-model="user.email" id="email" placeholder="Enter Your Email" value="some text"> </div> <div class="form-group"> <label for="Message">Message:</label> <textarea type="text" class="form-control" ng-model="user.message" id="message" placeholder="Enter Your Message" rows="4">Some text</textarea> </div> <button id="submit_button" type="button" class="btn btn-snc" onclick="onSubmit()">RESET FORM</button> <div class="alert alert-dismissible alert-set"> <strong class='Message-txt'></strong> </div> </form> 

Answer 3

您应该避免输入错误，例如：

$(".alert-set").addClass('alert-dnager');

为了避免这种情况，请尝试保持代码尽可能整洁。 您将能够避免很多错误，对代码有更好的了解，其他人可以帮助您提高效率。

您的if error语句可能变为：

.success(function(data) {
  console.log(data);
  if ( false === data.success) {

    // Typo error avoiding: NOT plain-text USE variables
    let alertClass = '.alert-set';
    let errMessage = '' ;

    // Reduce the amount of code
    $(alertClass)
     .addClass('alert-warning')
     .removeClass('alert-success')
     .fadeIn(1000)
     .removeClass("hide")
     .fadeOut(5000)
     .removeClass('alert-danger') ;

    // Treat only what you have to treat
    // You could use a lambda function, too:
    //   let errMessage = function(val){ return ... }(actual value);

    if ( $scope.errorName == data.errors.name )
    {
      errMessage = data.errors.name ;
    } 
    else if ( $scope.errorMobile == data.errors.mobile )
    {
      errMessage = data.errors.mobile ;
    } 
    else if (data.errors.email == 'fail')
    {
      errMessage = 'Sorry, Failed to send E-mail.';
    } 
    else {
      errMessage = 'somthing went wrong please try again.' ;
    }

    // Only one action
    $(".Message-txt").text(errMessage) ;

现在我们可以工作了；-)。

请记住，如果您的代码不干净并且我们一眼不明白发生了什么，我们就不会为您提供帮助。