Jquery Angular Submit 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和angular代码混合在一起会有问题——在许多情况下可能会出错。

在这种特殊情况下，您只是在更新输入字段的css类。angular中表单的内部表示仍然认为它是无效的——即使您从字段中删除了所有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);
        ...
    });
  };

（以上代码仅用于说明，未经测试）