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

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 开发人员，请查看此表单，如果我需要更改某些内容，请告诉我。

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>

Answer 2

分配不是比较：

$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 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) ;

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

请记住，如果您的代码不干净，或者我们无法第一眼了解发生了什么，我们不想为您提供帮助。