web-dev-qa-db-ja.com

ディレクティブからangular2アクセスngModel変数

次のような日時ピッカーディレクティブを作成しようとしています。
<input [(ngModel)]="date1" datetime-picker date-only />

および_date1_は日付として割り当てられます。例：new Date()

これをhtmlで表示すると、input要素のテキストは次のようになります
_Thu Jan 01 2015 00:00:00 GMT-0500_

代わりに次のように表示したい
_2015-01-01 00:00:00_

デフォルトのtoString（）関数からの結果を表示するのではなく、DatePipeを使用してディレクティブ内で日付をフォーマットしたい。

私の質問です。 「ディレクティブ内で、ngModel変数にどのようにアクセスしますか？」（例：date1）。これにより、toString（）メソッドを追加できます。

私のアプローチが適切でない場合は、教えてください。

angulardirectiveangular2-ngmodel
12
allenhwkim

NgModelを聞いて通知するシンプルで簡単な方法を次に示します。簡単に理解できるように、jQueryを使用してデモを行いました。実際には、何でもかまいません。

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);
            }
        });
    }
}
16
Dhrumil Bhankhar

ngModelにアクセスするには、_datetime-picker_に@Input()を含めるだけです。また、双方向データバインディングを使用しているため、ngModelに加えた変更を発行する必要があります。

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

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

このプランクを確認してください

IMHOのより良い方法は DatePipe を使用することです

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

このプランクを確認してください

13
Abdulrahman

「keyup」と「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);
  }
}
3
Majid Khaleghian