Question

我正在尝试从表单中获取更新的日期值，但它不起作用：

@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) => {};

所以当我说改变年份时：

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);
    }
}

这就是我使用它的方式：

<form #personalInfoForm="ngForm" (ngSubmit)="onSubmit()" class="form-width">
<date-picker [(inputDate)]="parsedDate" name="BirthDate" [yearBegin]="1950" [yearEnd]="2020"> </date-picker>
</form>

当我在下拉列表中更改日期值并按下表单的提交按钮时，我看不到更新日期。这与我的自定义日期选择器控件初始化时的日期相同。

Answer 1

我没有看到任何正在侦听EventEmitter的内容。

你想要类似的东西 (dateChange)="onDateChange($event.value)" 其中onDateChange($event.value)是父组件中接受新值的方法。

角度文档有一个很好的简单示例： https://angular.io/guide/component-interaction#parent-listens-for-child-event

EventEmitter没有将值重新发送回形式

1 个答案: