6
votes

Formes réactives de 2 angulaires - Tuyauterie une valeur d'un formulaire de formeControlName

Utiliser angulaire 2, j'ai un paramètre appelé "exemple" qui est un objet de date. Dans le modèle, je veux formater "Exemple" avec un tuyau de date. Quelque chose comme ceci: xxx pré>

Cependant, j'ai besoin d'utiliser les formes réactives de l'angulaire. FormControls prennent précédent, donc formontrolname code> remplacera quelque chose dans la directive CODE> VALUE CODE>. P>

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

angular angular2-forms

0 commentaires

4 Réponses :

0
votes

Pourquoi vous ne formez pas la date directement? Comme: xxx

0 commentaires

0
votes

Ici, nous pouvons compter sur JS. Vous vouliez utiliser courte temps code> comme pour votre tuyau, la sortie peut donc être ...

this.formGroup = new FormGroup({
  example: new FormControl(new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}))
});

1 commentaires

Comment continuer à afficher la valeur formatée lorsque la valeur change?

2
votes

MISE À JOUR: J'ai réalisé une approche plus simple et plus judicieuse utilise des valuechanges pour effectuer une série de changements avec une transformation de tuyau sur la valeur d'événement de changement.

Il y a probablement quelques meilleures pratiques pour trouver des abonnements et être efficaces si vous avez des abonnements et d'être efficaces si vous avez Beaucoup de contrôles de formulaire avec des abonnements. Vous pouvez également nettoyer toutes les transformations de tuyaux indésirables lorsque vous traitez / soumettez les valeurs de formulaire final. P>

Exemple de base (voir aussi: Source d'origine ): P>

this.searchField.valueChanges
    .pipe( // RxJS pipe composing delay + distinctness filters
        debounceTime(400),
        distinctUntilChanged()
    )
    .subscribe(term => {
      this.searchField.setValue(myPipe.transform(val))
  });

0 commentaires

0
votes

i Mince Vous pouvez utiliser ceci qui affiche la date formatée forte>

code> p>

mm / jj / aaaa - 1/1/1111 strong> p>

date:'MM/dd/yyyy' output: 17/09/2019
or
date:'shortDate' output: 17/9/19

0 commentaires