Winkel-2 reaktiven Formen - Leitungen einen Wert aus einer formControlName

Mit Winkel 2, habe ich einen parameter namens "Beispiel", das ist ein Date-Objekt. In der Vorlage möchte ich format "Beispiel" mit einem date-Rohr. So etwas wie dieses:

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

Jedoch, ich Winkel die reaktiven Formen. FormControls Präzedenzfall, so formControlName außer Kraft, nichts in der value Richtlinie.

<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)

Den formControlName Richtlinie nicht akzeptieren Rohre. Wie kann ich das format eines Date-Objekts in das template einer reaktiven form?

Pseudo-code:

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

InformationsquelleAutor ebakunin | 2017-03-08

angular angular2-forms

2

UPDATE: ich erkannte eine einfachere, sinnvollere Ansatz verwendet valueChanges durchführen setValue mit einem Rohr-Transformation auf das change-Ereignis Wert.

Gibt es wohl einige "best practices" zu finden, über die Reinigung Abonnements und effizient, wenn Sie viele Formular-Steuerelemente mit Abonnements. Man könnte auch bereinigen unerwünschte Rohr-Transformationen beim verarbeiten/übermitteln der endgültigen Werte.

Einfaches Beispiel (Siehe auch: original source):
```
ngOnInit() {
  this.searchField = new FormControl();
  this.searchField.valueChanges
      .subscribe(val => {
        this.searchField.setValue(myPipe.transform(val))
      });
}
```
Auszug mit debounce delay + Unterscheidbarkeit check:
```
this.searchField.valueChanges
    .debounceTime(400)
    .distinctUntilChanged()
    .subscribe(term => {
      this.searchField.setValue(myPipe.transform(val))
  });
```
Ursprünglichen Vorschlag...

Diese Antwort beschreibt das erstellen eines benutzerdefinierten Steuerelements value accessor für ein input-Feld, fügt angepasst timestamp-Konvertierung Funktionen innerhalb des onChange (wird mit dem Cmdlet convertTo* custom Funktion) und writeValue (wird mit dem Cmdlet " convertFrom-benutzerdefinierte Funktion) - Methoden.

Würden Sie wahrscheinlich etwas ähnliches erstellen (z.B. Vorlage anpassen usw. zum anderen Formular-input-Typen), aber ersetzen Sie den Konvertierungs-Funktionen mit Ihrem gewünschten Rohr-transform-Methode (vermutlich zwei verschiedene Arten), um zu erreichen, was Sie sind nach. Winkel-Dokumentation oder source code könnte hilfreich sein für weitere details.

Ich denke, dass andere vorgeschlagene Ansätze hier, mit einem Rohr-Transformation während der anfänglichen Formular-Steuerelement-Erstellung, sind begrenzt und möglicherweise nicht das, was Sie erwarten, weil es nicht weiterhin gelten diese änderungen als input-Wert wird vom Benutzer geändert. Wäre es korrekt angezeigt auf den ersten, aber jede manipulation verlieren würde, transformieren, filtern und die form würde einfach eingereicht werden wie Sie ist ohne das Rohr Transformation angewendet.

Ich fehlt möglicherweise etwas darüber, wie die anderen Vorschläge arbeiten oder konkret, was Sie suchen.

InformationsquelleAutor jmmygoggle

Warum machst du nicht format Datum direkt? Wie:

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

InformationsquelleAutor Roger Gusmao

0

Hier verlassen wir uns auf JS. Sie wollte shortTime als für die pipe, also die Ausgabe könnte...
```
10:50 PM
```
Also bei der Zuweisung der date-Wert, verwenden Sie diese:
```
this.formGroup = new FormGroup({
  example: new FormControl(new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}))
});
```
... und Sie würde die Zeit angezeigt, als Ihr Wunsch 🙂

Hier weiter Lesen auf Datum.der Prototyp.toLocaleTimeString() in Fall, dass Sie interessiert sind!
- wie funktioniert das halten der Anzeige der formatierten Wert, wenn sich der Wert ändert?
InformationsquelleAutor AJT82
0

Ich dünne Sie können diese verwenden, zeigt das Datum formatiert

<input type="text" [value]="formGroup.get('example').value | date:'MM/dd/yyyy'">

MM/dd/yyyy - 1/1/1111
```
date:'MM/dd/yyyy' output: 17/09/2019
or
date:'shortDate' output: 17/9/19
```
InformationsquelleAutor Srinivasan N

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.