Modification d'une entrée ngModel valeur à l'aide d'une directive Angulaire 2

Je suis coincé sur les modalités d'accès et de modification des entrées ngModel valeur à l'aide d'une directive. Le résultat de la question est que le modèle de la valeur de l'adresse n'est pas mise à jour lorsque je sélectionne l'adresse de votre choix...c'est juste ensemble de ce que j'ai vraiment tapé dans l'entrée, plutôt que la valeur finale de l'entrée.

J'type '830':

Modification d'une entrée ngModel valeur à l'aide d'une directive Angulaire 2

J'sélectionnez " 8300 Fauntleroy Façon sud-ouest, Seattle, WA, États-unis:

Modification d'une entrée ngModel valeur à l'aide d'une directive Angulaire 2

Valeur:

{
  address: '830'
}

Valeur souhaitée:

{
  address: '8300 Fauntleroy Way Southwest, Seattle, WA, United States'
}

Dans AngularJS, je pourrais faire cela:

(function() {
  'use strict';

  angular
  .module('casemanagerApp')
  .directive('googleplace', googleplace);

  function googleplace() {

    var directive = {
      require: 'ngModel',
      link: link
    };

    return directive;

    function link(scope, element, attrs, model) {
      var options = {
        types: [],
        componentRestrictions: {}
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0], options); //jshint ignore:line

      google.maps.event.addListener(scope.gPlace, 'place_changed', function() { //jshint ignore:line
        scope.$apply(function() {
          model.$setViewValue(element.val());
        });
      });
    }
  }

})();

Mais maintenant que je suis en train de convertir Angulaire 2, je suis un peu coincé. Voici ce que j'ai jusqu'à présent sur la conversion:

///<reference path="../../../../typings/browser/ambient/googlemaps/index.d.ts"/>

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[google-places]'
})
export class GooglePlaces implements OnInit {

  constructor(private _el: ElementRef) { }

  ngOnInit() {
    let gPlace = new google.maps.places.Autocomplete(this._el.nativeElement);
    google.maps.event.addListener(gPlace, 'place_changed', () => console.log(this._el.nativeElement));
  }

}

Utilisation:

<input type="text"
       ngControl="address"
       placeholder="Enter a location"
       [(ngModel)]="subject.address"
       #address="ngForm"
       google-places
       required>

Le cœur du problème, c'est que je ne comprends pas comment faire l'équivalent de model.$setViewValue(element.val()); Angulaire 2.

Toute aide serait grandement appréciée.

Plunker

  • Cela semble lié stackoverflow.com/questions/36106350/... peut-être que vous pouvez obtenir quelques idées.
  • Salut @GünterZöchbauer. Malheureusement, ces solutions ne fonctionne pas pour moi. J'ai créé un Plunker pour mieux illustrer le problème. plnkr.co/modifier/1xMjzo
  • Qu'en est Thierrys approche?
  • Oui, cela ne fonctionne pas non plus. Ils ont juste à la fois changer la valeur de l'entrée sans la mise à jour de la valeur du modèle.
InformationsquelleAutor sharpmachine | 2016-06-02