md-autocomplete not found passing the old values when we submit the form?

Question

I have implemented an md-autocomplete on my site. The search and selecting works, It updates the shown list and everything. But for some reason if i enter wrong values means

Answer 1

When You Select Any Item From Autocomplete suggestion, then it trigger selectedItemChange function, and when you submit form (pressing Enter, in this case), it trigger save function.

so if you select any item from suggestion at first time, it'll trigger selectedItemChange function and update $scope.data, and next time, if you write anything, which is not in model, it will not show anything in autocomplete suggestion, so you cant able trigger selectedItemChange, and thus $scope.data previously updated value not update, and now submitting form, log previous value of $scope.data in console.

if you just want to update (override) value of $scope.data, each time you changeAutocompleteSelection, try this

$scope.selectedItemChange = function(item) {
  if(item){
    $scope.data.Type = item.Type;
    $scope.data.Value = item.Value;
  } else {
    $scope.data = null;
  }
}

and when submitting form

$scope.save = function () {
  if ($scope.data) {
    console.log('submitting form');
    console.log($scope.data);
  } else {
    // prompt error, or show validation message
    console.log("select something from autocomplete");
  }

Edit => to set default value, if nothing selected from autocomplete, then. pass searchText variable into save function in template, like

ng-submit="save(searchText)"

and modified save function, to set default, if nothing selected

$scope.save = function (inputVal) {
  var payload = $scope.data;
  if (!$scope.data) {
    payload = {
     Type: inputVal, 
     Value: ""
    }
  }
  //calling save api
} 

angular
.module('MdAutocompleteBugApp', ['ngMaterial'])
.controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {
     $scope.data = null;
     $scope.save = function (inputVal) {
       var payload = $scope.data;
       if (!$scope.data) {
         payload = {
          Type: inputVal, 
           Value: ""
         }
       }
       if ($scope.data && $scope.data.Value && !$scope.data.Type) {
          payload = {
          Type: inputVal, 
           Value: $scope.data.Value
         }
      }
      debugger
       console.log(payload)
    //calling save api
    } 
    $scope.selectedItemChange = function(item) {
    if(item){
      $scope.data = {};
      $scope.data.Type = item.Type;
      $scope.data.Value = item.Value;

      $scope.save();
      } else {
      $scope.data = null;
      }
   }

    $scope.datas = [{

            "Type": "Mobile",

            "Value": "2400"

        }, {

            "Type": "laptop",

            "Value": "5677"


        }, {

            "Type": "Mobile",

            "Value": ""

        },

        {

            "Type": "tv",
			"Value": ""
           
        }
    ];

    var elementId = [];

    $scope.newArr = $scope.datas.filter(el => {
        if (elementId.indexOf(el.Type) === -1) {
            elementId.push(el.Type);
            return true;
        }
    });

    console.log($scope.newArr);

    $scope.getMatches = function (searchText) {
	    var deferred = $q.defer();
         $timeout(function () {
            deferred.resolve($scope.newArr.filter(function (config) {
                if (config.Type && config.Type != "")
                    return angular.lowercase(config.Type).indexOf(angular.lowercase(config.Type)) > -1;
                else
                    false;
            }))
         }, 0);

         return deferred.promise;
    }
});

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>

     

          <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
    <div ng-app="MdAutocompleteBugApp">

        <div ng-controller="MdAutocompleteBugController as vm">

           
       <form name = "test" ng-submit="save(searchText)">
            <md-toolbar class="md-padding">

                <md-autocomplete 
    			md-selected-item="Type" 
    			md-search-text="searchText" 
    			md-selected-item-change="selectedItemChange(item)"
    			md-items="item in getMatches(searchText)" 
    			md-item-text="item.Type" 
    			placeholder="Search states" 
    			md-no-cache="true">
    				<md-item-template>
                        <span>{{item.Type}} </span>
                    </md-item-template>
                   
                </md-autocomplete>
            </md-toolbar><br>
    		Value <input type="text" ng-model="data.Value">
    		<br><br><br>
    		<button type="submit">submit</button>
    		
    </form>
        </div>