Winkel 2 date Rohr innerhalb einer Control-Eingang

Ich habe eine dynamisch generierte Winkel 2 FormGroup mit mehreren Control-input-Felder. Einige der Eingaben sind Daten, die vom server abgerufenen als unix-Zeitstempel.

Was ich tun möchte ist :

  1. übersetzen zu können den unix-timestamp in eine lesbare form,
    wenn meine FormGroup gefüllt, und auch
  2. übersetzen der menschlichen
    Darstellung des Datums in eine unix-timestamp, wenn das Formular
    eingereicht.

Teil 1 ist etwas einfacher, mit Eckigen Datum pipe wie diese :

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

Wo diese.form ist ein Verweis auf die FormGroup und diese.Frage ist ein benutzerdefiniertes wrapper-Klasse basiert auf der offiziellen tutorial über dynamische Formulare :

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

Versucht das Datum zu ändern-Eingang, der Weg wird nicht funktionieren, weil das Rohr wird ständig versuchen, Sie zu transformieren, input-Wert, wodurch die Eingabe unbrauchbar, wenn nicht, werfen ein Ungültiges argument für Rohr 'DatePipe' Ausnahme.

Klären, fülle ich mein Formular mit den FormGroup.patchValue() api, und senden das Formular die Daten mit der FormGroup.getRawValue() api.

Habe ich versucht, eine Eckige 2 date picker Komponente, aber Sie machten meine riesige Formen ziemlich langsam, so möchte ich es tun, ohne benutzerdefinierten Datums-Picker oder jede jQuery-abhängige widgets.

Vielen Dank im Voraus.

InformationsquelleAutor ktsangop | 2017-02-15
  1. 9

    Einen Weg, um so etwas zu tun wäre, um eine Komponente zu erstellen für Ihre Eingabe implementiert ControlValueAccessor

    Eine Brücke zwischen einer Steuerung und einer nativen element.

    Einen ControlValueAccessor abstracts die Operationen des Schreibens einen neuen Wert
    ein DOM-element repräsentiert ein input-regler.

    Finden Sie DefaultValueAccessor für weitere Informationen.

    So etwas tun sollten, die trick (nicht getestet):

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

    dann sollten Sie in der Lage sein, es zu benutzen wie diese:

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

    oder

    <my-input [(ngModel)]="myModel"></my-input>
    • Danke, ich werde versuchen, diesen Ansatz, und kommen zurück zu Ihnen so bald wie möglich.
    • Hoppla ich habe gerade festgestellt, dass ich vergessen habe ein wichtiges Teil in der @Component Erklärung. Ich werde so schnell wie möglich Bearbeiten.
    • changeCallback und touchCallback initialisiert werden müssen, nehme ich an, wie diese touchCallback : any = () => {}; Andere als das, und nach einer viel zu Lesen, ich glaube, ich verstehe, wie es funktioniert jetzt! Akzeptieren Sie Ihre Antwort kurz, wenn ich keine anderen Fragen.Danke!
    • Du hast Recht, Sie müssen initialisiert werden, ich bearbeitet.
    InformationsquelleAutor n00dl3
Schreibe einen Kommentar