表单对象中不存在表单域 AngularJs

Question

我有几个字段的表单，但所有字段都存在于表单对象中，并且名称为 sector 的字段不存在。为什么？我该如何解决？

<form name="candidateForm" ng-submit="submitForm()">
    <div class="item item-top">
      <label>{{'Company'|translate}}*</label>
      <input company-autocompleter class="companyAutocompleterOuterSelect"
             ng-maxlength="100" name="company" ng-model="candidate.company"
             type="text" ng-change="progressUpdate()" required>
      <div class="alert alert-danger"
           ng-show="candidateForm.company.$invalid && !candidateForm.company.$pristine && candidateForm.company.$error.required == true">
          {{'Enter a company'|translate}}
      </div>
   </div>

   <div class="item industry">
      <label>{{'Sector'|translate}}*</label>
      <input sector-autocomplete name="sector" type="text"
             class="select2-container form-control input-lg select2 select14 widthSelectInput1"
             required>
       <div class="alert alert-danger"
            ng-show="candidateForm.sector.$invalid && !candidateForm.sector.$pristine && candidateForm.sector.$error.required">
            {{'Enter a sector'|translate}}
       </div>
  </div>
</form>

因此，现场公司存在于对象中，但扇区不存在

我没有使用 ng-model，因为扇区正在设置内部指令：

element.select2({
    minimumInputLength: 0,
    placeholder: $translate.instant('Sector'),
    allowClear: true,
    data: translatedSectors,
    dropdownCssClass: "bigdrop"
}).unbind("change").on("change", function(e) {

    if(e.added) {
        if($scope.candidate) {
            $scope.candidate.sector = e.added.id;
            $scope.progressUpdate();
        } else {
            if($scope.client) {
                $scope.client.sector = e.added.id;
            }
        }
    } else {
        if($scope.candidate) {
            $scope.candidate.sector = '';
        } else {
            if($scope.client) {
                $scope.client.sector = '';
            }
        }

    }
})

Answer 1

您需要使用 ng-model 绑定输入数据

<input sector-autocomplete name="sector" type="text"
       ng-model="candidate.sector"
       class="select2-container form-control input-lg select2 select14 widthSelectInput1"
       required>

Answer 2

candidateForm 是您的验证对象，candidate.sector 需要添加到 ng-model

Answer 3

sector-autocomplete 指令需要与 ngModelController:

配合使用

app.directive("sectorAutocomplete", function() {
    return {
        require: "ngModel",
        link: function(scope, elem, attrs, ngModel) {
            elem.select2({
                minimumInputLength: 0,
                placeholder: $translate.instant('Sector'),
                allowClear: true,
                data: translatedSectors,
                dropdownCssClass: "bigdrop"
            }).unbind("change").on("change", function(e) {                
                if (e.added) {
                    ngModel.$setViewValue(e.added.id);
                } else {
                    ngModel.$setViewValue("");
                }
            })
        }
    }
})

用法：

<input sector-autocomplete name="sector" type="autocomplete"
       ng-model="candidate.sector" ng-change="progressUpdate()"
       class="select2-container form-control input-lg select2 select14 widthSelectInput1"
       required />

ngModelController is needed in order to register the control with the ngFormController.

有关详细信息，请参阅

AngularJS Developer Guide - Implementing custom form controls (using ngModel)

表单对象中不存在表单域 AngularJs

Form fields are not present in the form object AngularJs

angularjs

angularjs-directive

angularjs-ng-model