angular2 accès ngModel variable à partir d'une directive

Je suis en train de construire un datetime picker directive comme suit.

<input [(ngModel)]="date1" datetime-picker date-only />

et date1 est assignée comme une Date, par exemple, new Date()

Quand je l'affiche ce en html, texte dans l'élément d'entrée se présente comme suit

Thu Jan 01 2015 00:00:00 GMT-0500

Je veux afficher comme suit plutôt

2015-01-01 00:00:00

Je veux le format de date à l'INTÉRIEUR d'une directive à l'aide de DatePipe au lieu de montrer le résultat de défaut fonction toString ().

Ma question est; "dans une directive, comment puis-je accéder à ngModel variable?", par exemple, date1, de sorte que je peux ajouter de la méthode toString ().

Si mon approche n'est pas droit, merci de me conseiller.

ne pas angulaire de passer le modèle de la valeur à votre transform fonction de votre pipe?

OriginalL'auteur allenhwkim | 2016-05-23

  1. 13

    Pour accéder à ngModel, vous pouvez simplement avoir un @Input() dans votre datetime-picker. Et puisque vous êtes à l'aide de 2 voies de la liaison de données, vous devez émettre les modifications que vous apportez à ngModel. 

    @Directive({
  selector:'[date-time-picker]'
})
export class DateTimePicker{
  @Input() ngModel;
  @Output() ngModelChange = new EventEmitter();

  ngOnInit(){
    this.ngModelChange.emit(this.ngModel.toDateString());
  }
}

    Cochez cette plunk

    La meilleure façon à mon humble avis, est à l'aide de la DatePipe

    @Component({
  selector: 'my-app',
  directives:[DateTimePicker],
  template: `
      <input (ngModelChange)="myDate = $event" [ngModel]="myDate | date:'short'" datetime-picker  />
  `
})
export class AppComponent {
  myDate = new Date();
}

    Cochez cette plunk

    Cette solution est bonne pour afficher la date dans le format. Cependant, on ne change pas une méthode, toString, d'un ngModel, qui ne fait que le formatage d'une date. Il en fait un changement ngModel de Date à string, que je n'ai pas l'intention de le faire. @Abdulrahman, n'avons-nous besoin d'émettre une nouvelle ngModel avec toString modifié?
    Je vois , vous voulez remplacer la méthode toString() ? Si oui, vous devez remplacer la méthode de Date pas ngModel
    Non, je ne veux pas remplacer Date.toString. Je veux remplacer toString méthode d'une instance de Date, qui est un ngModel.
    ngOnInit(): void { // emit toString Modified(date formatted) instance let newNgModel = new Date(this.ngModel.toString()); newNgModel.toString = () => { return new DatePipe().transform(this.ngModel, 'yyyy-MM-dd'); }; this.ngModelChange.emit(newNgModel); } Bien que cela fonctionne, je ne suis pas sûr, il a ses propres inconvénients.
    Bon, je pense que je l'ai eu :D. Pour cela, vous avez besoin d'une valeur personnalisée accesseur vérifier ce post. En particulier, la méthode writeValue. Désolé, je suis en train d'écrire à partir de mon téléphone.

    OriginalL'auteur Abdulrahman

  2. 13

    Ici est une façon simple et facile d'écouter et de aviser ngModel. J'ai juste démontré avec jQuery pour faciliter la compréhension. Pratiquement, il peut être n'importe quoi. 

    import { Directive, ElementRef } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
    selector: `[ngModel][customDir]`,
    providers: [NgModel]
})
export class CustomDirective {


    constructor(private element: ElementRef, private ngModel: NgModel) {

    }

    ngOnInit() {
        let that = this;
        /* Here you can write custom initialization code */

        /* Listening to the value of ngModel */
        that.ngModel.valueChanges.subscribe(function (value) {
            /* Set any value of your custom control */
            $(that.element.nativeElement).data("newValue",value);
        });

        /* Inform ng model for any new change happened */
        $(that.element.nativeElement).bind("customEvent",function (someNewValue) {
                that.ngModel.update.emit(someNewValue);
            }
        });
    }
}
    merci, cette solution a bien fonctionné.
    Bhankar, pourquoi $(c'.de l'élément.nativeElement).bind("customEvent",function (someNewValue) { que.ngModel.la mise à jour.émettre(someNewValue); } }); n'est pas licencié dans mon code
    Veuillez noter que cet exemple générique. Pas de code réel. Ici "customElement" peut être n'importe quel événement. Si vous voulez le modèle de mise à jour sur cliquez vous devez utiliser "clic" au lieu de "customEvent" mot.

    OriginalL'auteur Dhrumil Bhankhar