FormControl 输入中的 Angular 2 日期管道 [英] Angular 2 date pipe inside a FormControl input

问题描述

我有一个动态生成的带有多个 FormControl 输入字段的 Angular 2 FormGroup.一些输入是日期，它们作为 unix 时间戳从服务器获取.

I have a dynamically generated Angular 2 FormGroup with multiple FormControl input fields. Some of the inputs are Dates, which are fetched from the server as unix timestamps.

我想做的是:

1. 为了能够将 unix 时间戳转换为人类可读的形式，当我的 FormGroup 被填充时，还有
2. 翻译人类当表单为 unix 时间戳时，日期的表示形式提交.

第 1 部分有点简单，像这样使用 Angular 的日期管道:

Part 1 is somewhat simple, using Angular's date pipe like this :

<input class="form-control" [formControlName]="question.key"
[value]="this.form.controls[this.question.key].value | date:'dd/MM/yyyy'">

其中 this.form 是对 FormGroup 的引用，而 this.question 是基于关于动态表单的官方教程的自定义包装类:

Where this.form is a reference to the FormGroup and this.question is a custom wrapper class based on the official tutorial about dynamic forms :

https://angular.io/docs/ts/latest/食谱/dynamic-form.html

尝试以这种方式更改日期输入是行不通的，因为管道会不断尝试转换输入值，因此如果不为管道DatePipe"异常抛出无效参数，则输入将无法使用.

Trying to change the date input that way won't work because the pipe will constantly try to transform the input value, thus making the input unusable if not throwing an Invalid argument for pipe 'DatePipe' exception.

为了澄清，我使用 FormGroup.patchValue() api 填写表单，并使用 FormGroup.getRawValue() api 提交表单数据.

To clarify, i fill my form using the FormGroup.patchValue() api, and submit the form data using the FormGroup.getRawValue() api.

我曾尝试使用 Angular 2 日期选择器组件，但它们使我的大型表单变得非常缓慢，所以我想在没有自定义日期选择器或任何 jQuery 依赖小部件的情况下使用它.

I have tried to use an Angular 2 date picker component, but they made my huge forms pretty slow, so i would like to do it without custom date pickers or any jQuery dependent widgets.

提前致谢.

推荐答案

做这种事情的一种方法是为你的输入创建一个实现 ControlValueAccessor

One way to do such a thing would be to create a component for your input that implements ControlValueAccessor

控件和本机元素之间的桥梁.

A bridge between a control and a native element.

ControlValueAccessor 抽象了写入新值的操作到表示输入控件的 DOM 元素.

A ControlValueAccessor abstracts the operations of writing a new value to a DOM element representing an input control.

请参阅 DefaultValueAccessor 了解更多信息.

Please see DefaultValueAccessor for more information.

这样的事情应该可以解决问题(未经测试):

Something like this should do the trick (not tested):

export const DATE_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => MyDateInput),
  multi: true
};

@Component({
    template:`<input #input (input)="onChange($event)" (blur)="touchCallback()" type="date" [attr.disabled]="disabled?true:null">`
    selector:"my-input",
    styles:[],
    providers:[DATE_VALUE_ACCESSOR]
})
export class MyDateInput implements ControlValueAccessor{
    @ViewChild("input")
    input:ElementRef;
    disabled=false;
    changeCallback=(data:any)=>{};
    touchCallback=()=>{};

    onChange(event){
        let timestamp=this.convertToTimestamp(event.target.value);
        this.changeCallback(timestamp);
    }

    convertToTimestamp(formatedDate){
        //TODO:implement
    }

    convertFromTimestamp(timestamp){
        //TODO:implement
    }

    writeValue(obj: any){
        let formatedDate=this.convertFromTimestamp(obj);
        this.input.nativeElement.value=formatedDate;
    }

    registerOnChange(fn: any){
        this.changeCallback=fn;
    }

    registerOnTouched(fn: any){
        this.touchCallback=fn;
    }

    setDisabledState(isDisabled: boolean){
        this.disabled=isDisabled;
    }
}

那么你应该可以像这样使用它:

then you should be able to use it like this:

<my-input class="form-control" [formControlName]="question.key"></my-input>

或

<my-input [(ngModel)]="myModel"></my-input>

这篇关于FormControl 输入中的 Angular 2 日期管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！