角度：函数没有被调用

Question

我的 html 中有表单，我使用默认验证“必需”字段属性来验证字段并最后使用 $valid 检查并调用未调用的函数。当我删除“batchAttForm.$valid”时，函数正在工作，但使用该行它不会被调用。可能是什么问题？？

html

<form id="batchAttForm" name="batchAttForm" class="form-horizontal">
  <div class="form-group row">
    <label class="control-label col-md-1" align="right" for="batchDate"></label>
    <label class="control-label col-md-1" align="right" for="batchDate">Date</label>
    <div class="col-md-2 ">
      <div class="input-group" >
        <span class="input-group-btn">
          <button class="btn btn-default"><i class="fa fa-calendar"></i></button>
        </span>
        <input type="text" id="batchDate" ng-change="dateChange()" name="batchDate" ng-model="batch.date" datepicker class="form-control digits" required>
      </div>
    </div>

    <label class="control-label col-md-1" align="right" for="selectBatch">Batch</label>
    <div class="col-md-2" >
      <select id="selectBatch" name="selectBatch" ng-change="selectedBatch(batch.id)" ng-model="batch.id" class="form-control" required>
        <option value="">Select</option>
        <option ng-repeat="batch in batch.batches" value="{{batch.id}}">{{batch.batch}}</option>
      </select>
    </div>

    <label class="control-label col-md-1" align="right" for="selectBatch">Timing</label>
    <div class="col-md-2 ">
      <select id="selectBatch" name="selectBatch" ng-model="batch.time"  class="form-control" required>
        <option value="">Select</option>
        <option ng-repeat="time in batch.times" value="{{batch.time}}">{{time.start_time_string}} - {{time.end_time_string}}</option>
      </select>
    </div>           
  </div>

  <br>

  <div class="form-group form-action">
    <label class="control-label col-md-3" align="right" for=""></label>
    <div class="col-md-2"> 
      <button type="submit" id="reschedule" ng-click="batchAttForm.$valid && reschedule()" class="btn btn-default"><i class="fa fa-undo"></i> Re-schedule</button>
    </div>

    <div class="col-md-2" >
      <button type="submit" id="punchAtt" ng-click="batchAttForm.$valid && punchAttendance()" class="btn btn-success"> &nbsp;<i class="fa fa-check"></i>  Punch  &nbsp;&nbsp;</button>
    </div>
  </div>
</form>

控制器

app.controller('batchAttendanceController',function($scope,apiCall) {
  $scope.batch = {};

  $scope.batch.date = moment().format("DD-MM-YYYY");

  //methods
  $scope.selectedBatch = selectedBatch;
  $scope.punchAttendance = punchAttendance;
  $scope.reschedule = reschedule;
  $scope.dateChange = dateChange;

  function punchAttendance() {
    console.log("foo");
  }

  function reschedule() {
    console.log("bar");
  }

  function dateChange() {
    initController($scope.batch.date);
  }

  function selectedBatch(batch_id) {
    var b = $scope.batch.batches;
    for (var i=0; i < b.length; i++) {
      if (b[i].id == batch_id) {
        for (var j=0; j < b[i].batch_time.length; j++) {
          b[i].batch_time[j].start_time_string =  moment(b[i].batch_time[j].start_time,"HH:mm:ss").format("hh:mm A");
          b[i].batch_time[j].end_time_string =  moment(b[i].batch_time[j].end_time,"HH:mm:ss").format("hh:mm A"); 
        }
        $scope.batch.times = b[i].batch_time;
      } else {
        $scope.batch.times = [];
      }
    }
  }
});

Answer 1

错误的原因是，您有两个表单元素 select 具有相同的 name 和 idattribute 。这就是原因，您的表格总是无效的。 .

   <label class="control-label col-md-1" align="right" for="selectBatch">Batch</label>
    <div class="col-md-2" >
      <select id="selectBatch" name="selectBatch" ng-change="selectedBatch(batch.id)" ng-model="batch.id" class="form-control" required>//same name and id 
        <option value="">Select</option>
        <option ng-repeat="batch in batch.batches" value="{{batch.id}}">{{batch.batch}}</option>
      </select>
    </div>

    <label class="control-label col-md-1" align="right" for="selectBatch">Timing</label>
    <div class="col-md-2 ">
      <select id="selectBatch" name="selectBatch" ng-model="batch.time"  class="form-control" required>//same name and id 
        <option value="">Select</option>
        <option ng-repeat="time in batch.times" value="{{batch.time}}">{{time.start_time_string}} - {{time.end_time_string}}</option>
      </select>
    </div> 

Answer 2

尝试在表单元素中使用 ng-click 作为 ng-submit 并删除按钮中的 ng-click