javascript - 如何在提交表单后使用 'Loading' 更改按钮文本并在以 Angular 提交后重置表单

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 误差。你能帮我解决这个问题吗？如果你是 Angular 开发人员，那么你能检查一下这个表格，让我知道我是否需要更改某些内容。

Answer 1

要重置表单，您可以使用以下内容:

(注意:您有两个 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>