Ống 2 ngày góc cạnh bên trong một đầu vào FormControl

Question

Tôi có một nhóm Formular Angular 2 được tạo động với nhiều trường nhập FormControl. Một số đầu vào là Ngày tháng, được lấy từ máy chủ dưới dạng dấu thời gian unix.

gì tôi muốn làm là:

1. để có thể dịch các dấu thời gian unix mẫu có thể đọc được con người, khi FormGroup của tôi được phổ biến, và cũng
2. dịch nhân đại diện của ngày đến dấu thời gian unix khi biểu mẫu được gửi .

Phần 1 là hơi đơn giản, sử dụng ống ngày kiễu góc của như thế này:

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

đâu this.form là một tham chiếu đến FormGroup và this.question là một lớp tùy chỉnh wrapper dựa trên các hướng dẫn chính thức hình thức về động:

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

Đang cố gắng để thay đổi đầu vào ngày như vậy sẽ không làm việc vì các đường ống liên tục sẽ cố gắng để thay đổi giá trị đầu vào, do đó làm cho đầu vào không sử dụng được nếu không ném đối số Không hợp lệ cho ngoại lệ 'DatePipe' của đường ống.

Để làm rõ, tôi điền vào biểu mẫu của mình bằng cách sử dụng FormGroup.patchValue() api và gửi dữ liệu biểu mẫu bằng cách sử dụng FormGroup.getRawValue() api.

Tôi đã cố gắng sử dụng thành phần bộ chọn ngày Angular 2, nhưng chúng tạo ra các biểu mẫu khổng lồ của tôi khá chậm, vì vậy tôi muốn làm điều đó mà không có bộ chọn ngày tùy chỉnh hoặc bất kỳ tiện ích con phụ thuộc nào của jQuery.

Xin cảm ơn trước.

Answer 1

Một cách để làm một điều như vậy sẽ tạo ra một thành phần cho đầu vào của bạn mà thực hiện ControlValueAccessor

Một cầu nối giữa một điều khiển và một yếu tố bản địa.

Trình điều khiển truy vấn ControlValue tóm tắt các hoạt động viết giá trị mới thành phần tử DOM đại diện cho điều khiển đầu vào.

Vui lòng xem DefaultValueAccessor để biết thêm thông tin.

Something như thế này nên làm các trick (không kiểm tra):

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

sau đó bạn sẽ có thể sử dụng nó như thế này:

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

hoặc

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