表单对象AngularJs中不存在表单字段答案

【问题标题】：Form fields are not present in the form object AngularJs表单对象AngularJs中不存在表单字段
【发布时间】：2018-12-05 12:23:14
【问题描述】：

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

<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 = '';
            }
        }

    }
})

【问题讨论】：

您的公司输入中有 ng-model 属性，但您的部门输入中没有
如果您的意思是候选对象没有扇区属性。然后分享您的代码如何将数据填充到候选对象中
更新问题

标签： angularjs angularjs-directive angularjs-ng-model

【解决方案1】：

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 才能使用ngFormController 注册控件。

有关详细信息，请参阅

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：