web-dev-qa-db-fra.com

angular2 access ngModel variable à partir d'une directive

J'essaie de construire une directive de sélecteur de date/heure comme celle-ci.
<input [(ngModel)]="date1" datetime-picker date-only />

et date1 est attribué en tant que Date, par exemple, new Date()

Quand j'affiche ceci en HTML, le texte dans l'élément input ressemble à ceci
Thu Jan 01 2015 00:00:00 GMT-0500

Je veux afficher comme ci-dessous
2015-01-01 00:00:00

Je veux formater la date WITHIN dans une directive à l'aide de DatePipe au lieu d'afficher le résultat de la fonction toString () par défaut.

Ma question est; "Dans une directive, comment puis-je accéder à la variable ngModel?", par exemple, date1, pour pouvoir ajouter la méthode toString ().

Si mon approche n'est pas correcte, s'il vous plaît, avisez-moi.

angulardirectiveangular2-ngmodel
11
allenhwkim

Voici un moyen simple et facile d'écouter et de notifier ngModel. Je viens de démontrer avec jQuery pour une compréhension facile. Pratiquement, ça 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);
            }
        });
    }
}
13
Dhrumil Bhankhar

Pour accéder à ngModel, vous pouvez simplement avoir une @Input() dans votre datetime-picker. Et puisque vous utilisez la liaison de données bidirectionnelle, vous devez émettre les modifications apportées à ngModel. 

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

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

Vérifiez ce plunk

La meilleure façon à mon humble avis, utilise le DatePipe

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

Vérifiez ce plunk

13
Abdulrahman

Vous pouvez utiliser "keyup" et "this.ngModel.model"

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

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

  constructor(private ngModel: NgModel) { }

  @HostListener('keyup', ['$event']) onKeyUp(event) {
    let value = this.ngModel.model;
    this.ngModel.update.emit(value);
  }
}
0
Majid Khaleghian