[英]EventEmitter not emitting value back to form
I'm trying to get the updated date value back from the form but it's not working: 我正在尝试从表单获取更新的日期值,但是它不起作用:
@Component({
selector: 'date-picker',
template:
`
<select [(ngModel)]="day" name="dayPicker" class="form-control" style="width: 80px" required>
<option *ngFor="let day of days" [value]="day">{{day}}</option>
</select>
<select [(ngModel)]="month" name="monthPicker" class="form-control" style="width: 80px" required>
<option *ngFor="let x of months" [value]="x.MonthId">{{x.MonthName}}</option>
</select>
<select [(ngModel)]="year" name="yearPicker" class="form-control" style="width: 100px" required>
<option *ngFor="let year of years" [value]="year">{{year}}</option>
</select>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePicker),
multi: true,
}
]
})
export class DatePicker implements ControlValueAccessor, OnChanges, OnInit {
public _day: number = null;
public _month: number = null;
public _year: number = null;
@Input() public inputDate: Date;
@Input() public yearBegin: number;
@Input() public yearEnd: number;
@Output() public dateChange: EventEmitter<Date> = new EventEmitter<Date>();
private months: Month[];
private years: number[];
private daysInMonth: DaysInMonth[];
private days: number[];
private onChangeCallback: (_: any) => {};
private propagateChange = (_: any) => {};
so when i say change the year: 所以当我说改变年份:
set year(val: number) {
this._year = val;
if(this._day != null && this._month != null) {
this.inputDate = new Date(this._year, (this._month - 1), this._day);
this.dateChange.emit(this.inputDate);
this.propagateChange(this.inputDate);
}
}
this is how I use it: 这是我的用法:
<form #personalInfoForm="ngForm" (ngSubmit)="onSubmit()" class="form-width">
<date-picker [(inputDate)]="parsedDate" name="BirthDate" [yearBegin]="1950" [yearEnd]="2020"> </date-picker>
</form>
When I change the date values around in the dropdowns and press the form's submit button I do not see the updated date. 当我在下拉列表中更改日期值并按表单的提交按钮时,我看不到更新的日期。 It's the same date my custom date picker control got initialized with.
这是我的自定义日期选择器控件初始化的同一天。
I don't see anything listening for that EventEmitter. 我看不到有什么东西在监听那个EventEmitter。
You want something like (dateChange)="onDateChange($event.value)"
Where onDateChange($event.value)
is a method in the parent componenet which accepts the new value. 您需要类似
(dateChange)="onDateChange($event.value)"
其中onDateChange($event.value)
是父componenet中的一种接受新值的方法。
The angular documentation has a nice and simple example of this: https://angular.io/guide/component-interaction#parent-listens-for-child-event 角度文档中有一个很好的简单示例: https : //angular.io/guide/component-interaction#parent-listens-for-child-event
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.