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

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

現在我們可以工作了；-)。

請記住，如果您的代碼不干凈並且我們一眼不明白發生了什么，我們就不會為您提供幫助。