Tôi có trường ngày tháng và tôi muốn xóa trình giữ chỗ theo mặc định.

Tôi đang sử dụng javascript onfocusvà onfocusoutcác sự kiện để xóa trình giữ chỗ.

Bất cứ ai có thể giúp đỡ với việc sử dụng chỉ thị angle2?

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">

Tôi cố gắng giải quyết theo cách này, nhưng tôi gặp sự cố khi đặt lại loại trường nhập.

import { Directive, ElementRef, Input } from 'angular2/core';
@Directive({
    selector: '.dateinput', 
    host: {
    '(focus)': 'setInputFocus()',
    '(focusout)': 'setInputFocusOut()',
  }})

  export class MyDirective {
      constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}

      setInputFocus(): void {
        //console.log(this.elementRef.nativeElement.value);
      }
  }

Cố gắng sử dụng (focus)và (focusout)thay vì onfocusvàonfocusout

như thế này : -

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

bạn cũng có thể sử dụng như thế này: -

một số người thích thay thế tiền tố on-, được gọi là biểu mẫu chuẩn:

<input name="date" type="text" on-focus="focusFunction()" on-focusout="focusOutFunction()">

Biết thêm về ràng buộc sự kiện xem tại đây .

bạn phải sử dụng HostListner cho trường hợp sử dụng của mình

Angular sẽ gọi phương thức được trang trí khi phần tử chủ phát ra sự kiện được chỉ định. @HostListenerlà trình trang trí cho phương thức xử lý sự kiện / gọi lại

Xem Cập nhật của tôi Plunker hoạt động.

Ví dụ làm việc Working Plunker

Cập nhật

Một số sự kiện khác có thể được sử dụng trong góc -

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

Nếu bạn muốn bắt sự kiện tiêu điểm một cách động trên mọi đầu vào trên thành phần của mình:

import { AfterViewInit, Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  constructor(private el: ElementRef) {
  }

  ngAfterViewInit() {
       // document.getElementsByTagName('input') : to gell all Docuement imputs
       const inputList = [].slice.call((<HTMLElement>this.el.nativeElement).getElementsByTagName('input'));
        inputList.forEach((input: HTMLElement) => {
            input.addEventListener('focus', () => {
                input.setAttribute('placeholder', 'focused');
            });
            input.addEventListener('blur', () => {
                input.removeAttribute('placeholder');
            });
        });
    }
}

Kiểm tra mã đầy đủ tại đây: https://stackblitz.com/edit/angular-93jdir

Tôi đã tạo một chỉ thị nhỏ liên kết với thuộc tính tabindex. Nó thêm / xóa động lớp has-focus.

@Directive({
    selector: "[tabindex]"
})
export class TabindexDirective {
    constructor(private elementHost: ElementRef) {}

    @HostListener("focus")
    setInputFocus(): void {
        this.elementHost.nativeElement.classList.add("has-focus");
    }

    @HostListener("blur")
    setInputFocusOut(): void {
        this.elementHost.nativeElement.classList.remove("has-focus");
    }
}

Giải pháp là:

  <input (click)="focusOut()" type="text" matInput [formControl]="inputControl"
  [matAutocomplete]="auto">
   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
     <mat-option (onSelectionChange)="submitValue($event)" *ngFor="let option of 
      options | async" [value]="option">
      {{option.name | translate}}
     </mat-option>
  </mat-autocomplete>

TS
focusOut() {
this.inputControl.disable();
this.inputControl.enable();
}

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

làm việc cho tôi từ Pardeep Jain