Angular 2反应形式-用管道传递来自formControlName的值

Question

使用Angular 2，我有一个名为“ example”的参数，它是一个Date对象。在模板中，我要使用日期管道设置“示例”的格式。像这样：

<input type="text" [value]="example | date:'shortTime'">
// 9:00 AM 

但是，我需要使用Angular的反应形式。FormControls优先，因此formControlName将覆盖value指令中的所有内容。

<input type="text" formControlName="example">
// Wed Mar 08 2017 09:00:00 GMT-0700 (MST)

<input type="text" formControlName="example" [value]="example | date:'shortTime'">
// Wed Mar 08 2017 09:00:00 GMT-0700 (MST)

该formControlName指令将不接受管道。如何在反应形式的模板中格式化Date对象？

伪代码：

@Component({
    template: `
        <form [formGroup]="formGroup">
            Example: <input type="text" formControlName="example">
        </form>
    `
})

export class ExampleComponent implements OnInit {
    public formGroup: FormGroup;
    public example: Date = new Date();

    public ngOnInit() {
        this.formGroup = new FormGroup({
            example: new FormControl(this.example)
        });
    }
}

Answer 1

为什么不直接格式化日期？喜欢：

this.formGroup = new FormGroup({
        example: [new Date().toISOString()]
    });