Применение конвейера или преобразования к значению реактивной формы

Я строю простую реактивную форму. Для простоты, допустим, единственные данные, которые я хочу отображать, - это дата.

test.component.html

<form novalidate [formGroup]="myForm">
       <input type="date" formControlName="date">
</form>

test.component.ts

private date: Date = Date.now();
ngOnInit() {
        this.myForm = this.fb.group({
            date: [this.date, [Validators.required]]
        });
    }

Поле input type = date в шаблоне требует, чтобы дата была в формате «yyyy-MM-dd». Значение в событии - это объект даты JavaScript.

Как изменить данные на уровне шаблона, чтобы вводимое значение было правильным?

Что я пробовал:

Один из способов сделать это - вставить DatePipe в мой компонент и применить преобразование в коде.

date: [datePipe.transform(this.event.date, 'yyyy-MM-dd'), [Validators.required]]

Но это связывает детали реализации шаблона с компонентом. Например, что, если шаблон NativeScript требует, чтобы дата была в формате MM/dd/yyyy? FormGroup больше не действительна.


angular date angular-pipe
person cgatian    schedule 16.11.2016    source источник
comment
Извините, но я думаю, что это единственный способ ... Лично я бы использовал службу для получения формата даты (устанавливается динамически через MyModule.forRoot("myFormat")), чтобы вы могли использовать его на нескольких платформах.   -  person n00dl3    schedule 16.11.2016

Ответы (1)


arrow_upward
7
arrow_downward

Единственный способ, которым я смог придумать с помощью @ n00dl3, - это обернуть компонент md-input и предоставить правильное значение через ControlValueAccessor

    import { Component, Input, ViewChild } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    import { DatePipe } from '@angular/common';
    import { MdInput } from '@angular/material';

    @Component({
        selector: 'md-date-input',
        template: `
        <md-input [placeholder]="placeholder"
            type="date"
            (change)="update()"
            [value]="dateInput">
        </md-input>`,
        providers: [
            { provide: NG_VALUE_ACCESSOR, useExisting: DateInputComponent, multi: true }]
    })
    export class DateInputComponent implements ControlValueAccessor {
        @Input() placeholder: string;
        @ViewChild(MdInput) mdInput: MdInput;

        dateInput: string;

        onChange: (value: any) => void;

        constructor(private datePipe: DatePipe) {
        }

        writeValue(value: any) {
            this.dateInput = value == null ? '' : this.datePipe.transform(value, 'yyyy-MM-dd');
        }

        registerOnChange(fn: (value: any) => void) {
            this.onChange = fn;
        }

        registerOnTouched(fn: (value: any) => void) {
        }

        update() {
            this.onChange(this.mdInput.value ? new Date(this.mdInput.value) : '');
        }
}
person cgatian    schedule 16.11.2016