[英]Change an input's ngModel value using a directive Angular 2
I'm stuck on how to access and change an inputs ngModel
value using a directive. 我坚持如何使用指令访问和更改输入
ngModel
值。 The outcome of the issue is that the model's address value doesn't update when I select the desired address...it's just set to what I actually typed into the input, rather than final value of the input. 问题的结果是,当我选择所需的地址时,模型的地址值不会更新...它只是设置为我实际键入输入的内容,而不是输入的最终值。
I type '830': 我键入'830':
I select '8300 Fauntleroy Way Southwest, Seattle, WA, United States': 我选择'8300 Fauntleroy Way Southwest,Seattle,WA,United States':
Resulting value: 结果价值:
{
address: '830'
}
Desired value: 期望值:
{
address: '8300 Fauntleroy Way Southwest, Seattle, WA, United States'
}
In AngularJS I could do this: 在AngularJS中,我可以这样做:
(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());
});
});
}
}
})();
But now that I'm trying to convert it Angular 2, I'm a little stuck. 但是现在我正在尝试将它转换为Angular 2,我有点卡住了。 Here's what I have so far on the 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));
}
}
Usage: 用法:
<input type="text"
ngControl="address"
placeholder="Enter a location"
[(ngModel)]="subject.address"
#address="ngForm"
google-places
required>
The heart of the issue is I don't understand how to do the equivalent of model.$setViewValue(element.val());
问题的核心是我不明白如何做相当于
model.$setViewValue(element.val());
in Angular 2. 在Angular 2中。
Any assistance would be greatly appreciated. 任何帮助将不胜感激。
I ended up getting this to work, although I don't understand why it works because I'm not binding ngModelChange
to the element...but it works. 我最终得到了这个工作,虽然我不明白为什么它工作,因为我没有绑定
ngModelChange
元素...但它的工作原理。
Directive: 指示:
/// <reference path="../../../../typings/browser/ambient/googlemaps/index.d.ts"/>
import { Directive, ElementRef, Output, EventEmitter, OnInit, NgZone } from '@angular/core';
@Directive({
selector: '[google-places]'
})
export class GooglePlaces implements OnInit {
@Output() ngModelChange: EventEmitter<any> = new EventEmitter(false);
options = {
types: ['address'],
componentRestrictions: { country: "us" }
};
constructor(
private _el: ElementRef,
private _ngZone: NgZone) { }
ngOnInit() {
let gPlace = new google.maps.places.Autocomplete(this._el.nativeElement, this.options);
google.maps.event.addListener(gPlace, 'place_changed', () => {
this._ngZone.run(() =>
this.ngModelChange.emit(this._el.nativeElement.value));
});
}
}
Component Template: 组件模板:
<input type="text"
class="form-control"
ngControl="address"
id="subjectAddress"
placeholder="Enter a location"
[(ngModel)]="subject.address"
#address="ngForm"
google-places
required>
I would inject the ControlValueAccessor
associated with your input. 我会注入与您的输入关联的
ControlValueAccessor
。 Here is a sample: 这是一个示例:
@Directive({
selector: '[test]'
})
export class TestDirective {
constructor(@Inject(NG_VALUE_ACCESSOR) private valueAccessor:ControlValueAccessor) {
setTimeout(() => {
this.valueAccessor[0].writeValue('test');
}, 1000);
}
}
See this plunkr for example: https://plnkr.co/edit/owhBHdBncAxlzwJ8xkfq?p=preview . 请参阅此plunkr,例如: https ://plnkr.co/edit/owhBHdBncAxlzwJ8xkfq?p = preview。
This is what i did with my datepicker , Might help. 这就是我用我的日期选择器做的,可能会有帮助。
//Create a method in your component to change the model
dateChanged(date) {
this.hero.bday = date;
}
public ngOnInit() {
//CREATE A REFERERENCE TO YOUR COMPONENT
var component:CreateEventComponent = this;
$("#bday").datepicker({
dateFormat: "dd-mm-yy",
altFormat: "dd-mm-yy",
onSelect: function (dateText, datePicker) {
//UPDATE YOUR MODEL FORM JQUERY CODE.
component.dateChanged(dateText);
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.