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':
J'sélectionnez " 8300 Fauntleroy Façon sud-ouest, Seattle, WA, États-unis:
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.
- 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.
Vous devez vous connecter pour publier un commentaire.
J'ai fini ce travail, mais je ne comprends pas pourquoi cela fonctionne, car je ne suis pas de liaison
ngModelChange
à l'élément...mais il fonctionne.Directive:
Modèle De Composant:
ngModelChange
à l'élément" - en fait vous ne, quand vous utilisez[(ngModel)]="subject.address"
il est traduit à l'[ngModel]="subject.address"
et(ngModelChange)="subject.address = $event"
J'permettrait d'injecter de l'
ControlValueAccessor
associé à votre entrée. Voici un exemple:Voir ce plunkr par exemple: https://plnkr.co/edit/owhBHdBncAxlzwJ8xkfq?p=preview.
C'est ce que j'ai fait avec mon datepicker , Pourrait aider.