Form fields are not present in the form object AngularJs

Question

I have form with a few fields, but all fields are present in form object and field with name sector is not present. Why? And how I should fix it?

<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>

So, field company is present in object, but sector is not

I am not using ng-model because sector is setting inside directive:

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

    }
})

georgeawg · Accepted Answer · 2018-12-05 20:11:41Z

The sector-autocomplete directive needs to work with the 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("");
                }
            })
        }
    }
})

Usage:

<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 />

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

For more information, see

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

georgeawg · Accepted Answer · 2018-12-08 14:59:03Z

0

You need to bind input data using ng-model

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

edited Dec 8, 2018 at 14:59

georgeawg

49k13 gold badges77 silver badges98 bronze badges

answered Dec 5, 2018 at 13:00

Vijay Atmin

4653 silver badges13 bronze badges

Comments

georgeawg · Accepted Answer · 2018-12-08 15:00:34Z

0

candidateForm is your validation object, the candidate.sector needs to be added to an ng-model

edited Dec 8, 2018 at 15:00

georgeawg

49k13 gold badges77 silver badges98 bronze badges

answered Dec 5, 2018 at 13:46

ppollono

3,6721 gold badge23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Form fields are not present in the form object AngularJs

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related