jquery angular提交BTN啓用更改

Question

夥計們。我有這樣的代碼和平讓我感到困惑，我陷入了困境。

我有一個下拉腳本，用於在用戶選擇一個選項時從數據庫收集數據。選中後，字段將填充與每個字段對應的數據。該表單由angularjs驗證。即使字段中填充了數據，該按鈕仍然被禁用。

的index.php JS

$("#quick_fill").change(function() { 

var id = $(this).val(); 

    $.ajax({ 
    url : "php/autofill.php", 
    data : { 
    "id" : id 
    }, 
    type : "POST", 
    dataType : "json", 
    success : function(data) { 
     console.log(data.fname); 
     $("#first").val(data.fname); 
     $("#first").removeClass("ng-pristine ng-invalid ng-invalid-required ng-touched"); 
     $("#first").addClass("ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched"); 
     $("#last").val(data.lname); 
     $("#last").removeClass("ng-pristine ng-invalid ng-invalid-required ng-touched"); 
     $("#last").addClass("ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched"); 
     $("#middle").val(data.mname); 
     $("#middle").removeClass("ng-pristine ng-invalid ng-invalid-required ng-touched"); 
     $("#middle").addClass("ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched"); 
} 
    }); 
}); 

我的問題是如何去使提交表單按鈕。何時已經填寫完畢。

HTML表單

<form class="form-horizontal" role="form" name="frm" novalidate="" > 

     <div class="form-group"> 
      <input type="hidden" class="form-control" id="coc" value="<?php printf('%03d',$i);?>"> 
     </div> 

     <div class="form-group" style="padding-left:10px;"> 
      <div class="col-sm-3"><label>Agency Name:</label> 
      <span ng-show="frm.branch.$dirty && frm.branch.$error.required" class="label label-danger" style="margin-left:10px;">Please Pick an Agency</span> 
      <span ng-show="frm.branch.$valid" class="glyphicon glyphicon-ok text-success" style="margin-left:10px;"> </span>   
      <div class="col-sm-3"><label>Last Name:</label> 
       <span ng-show="frm.last.$dirty && frm.last.$error.required" class="label label-danger" style="margin-left:10px;">This is Required</span> 
       <span ng-show="frm.last.$dirty && frm.last.$error.minlength" class="label label-danger" style="margin-left:10px;">Enter Atleast 2 Characters</span> 
       <input ng-model="last" ng-minlength="2" name="last" id="last" type="text" class="form-control" placeholder="Last Name" onkeyup="javascript:this.value=this.value.toUpperCase();" required autocomplete="off"> 
      </div> 
      <div class="col-sm-3"><label>Given Name:</label> 
       <span ng-show="frm.first.$dirty && frm.first.$error.required" class="label label-danger" style="margin-left:10px;">This is Required</span> 
       <span ng-show="frm.first.$dirty && frm.first.$error.minlength" class="label label-danger" style="margin-left:10px;">Enter Atleast 2 Characters</span> 
       <input ng-model="first" ng-minlength="2" name="first" id="first" type="text" class="form-control" placeholder="First Name" onkeyup="javascript:this.value=this.value.toUpperCase();" required autocomplete="off"> 
      </div> 
      <div class="col-sm-3"><label>Middle Name:</label> 
       <input ng-model="middle" name="middle" id="middle" type="text" class="form-control" placeholder="Middle Initial" onkeyup="javascript:this.value=this.value.toUpperCase();" autocomplete="off"> 
      </div> 
     </div> 
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button ng-disabled="frm.$invalid" type="submit" id="save" class="btn btn-info">&nbsp; Save &nbsp;</button>` 

Answer 1

如果混合jQuery和角碼在一起，這將是有問題的 - 它可以去錯在許多情況下。

在這種特殊情況下，您只是更新輸入字段的css類。角度表單的內部表示仍然認爲它是無效的 - 即使您從字段中刪除所有ng-invalid。

您應該嘗試更新應用程序以使用角度設置值的方式。

$scope.change = function() { 
    var id = $scope.selectedId; 

    $http({ 
     url : "php/autofill.php", 
     data : { 
     "id" : id 
     }, 
     method : "POST" 
    }).then(function(response) { 
     var data = response.data; 
     console.log(data.fname); 
     $scope.first = data.fname; 
     $scope.frm.first.$setValidity(true); 
     $scope.frm.first.$setPristine(false); 
     ... 
    }); 
    }; 

（上面的代碼只是爲了說明目的，而不是測試）