2016-07-30 34 views
0

我正試圖使用​​元數據來設置HTML輸入屬性。遵循屬性指令指南(https://angular.io/docs/ts/latest/guide/attribute-directives.html),我想出了以下內容。reference peer(edit:parent)指令輸入

import "reflect-metadata"; 
import { Directive, ElementRef, Input, OnInit} from '@angular/core'; 

@Directive({ 
    selector: '[myModel]' 
}) 
export class ModelDirectives implements OnInit { 

    private element: any; 

    @Input('myModel') 
    model: any; 

    @Input('myProperty') 
    propertyString: string; 

    constructor(elementRef: ElementRef) { 
     this.element = elementRef.nativeElement; 
    } 

    ngOnInit() { 
     if (this.model.hasOwnProperty(this.propertyString)) { 
      this.element.required = Reflect.getMetadata('required', this.model, this.propertyString); 
      //TODO other metadata 
     } 
    } 
} 

如果我使用此指令,以下輸入標記將具有必需的屬性。
<input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'" />
但使用material2它不會。
<md-input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'"></md-input>
我看到物料輸入組件有一個必需的@Input(https://github.com/angular/material2/blob/master/src/components/input/input.ts#L159),它傳遞給本地輸入標籤。我的問題是如何從我的指令中引用peer指令的輸入?或者我正在以正確的方式進行?

注:用戶名屬性定義爲

@required() 
public username: string; 

/** 
* Property decorator for form models. 
* @param isRequired Whether property is required for html form, defaults to true. 
*/ 
export function required(isRequired?: boolean): PropertyDecorator { 
    return Reflect.metadata('required', isRequired ? isRequired : true); 
} 

回答

0

所以我發現我的[myModel]指令將在angular2依賴注入被認爲是孩子md-input不是同行,所以我用了以下內容https://angular.io/docs/ts/latest/cookbook/dependency-injection.html#!#find-parent

import "reflect-metadata"; 
import { Directive, ElementRef, Input, OnInit, Optional } from '@angular/core'; 
import { MdInput } from '@angular2-material/input'; 

@Directive({ 
    selector: '[tstModel]' 
}) 
export class ModelDirectives implements OnInit { 

    private inputElement: HTMLInputElement; 

    @Input('tstModel') 
    model: any; 

    @Input('tstProperty') 
    propertyString: string; 


    constructor(elementRef: ElementRef, @Optional() private mdInput: MdInput) { 
     this.inputElement = elementRef.nativeElement; 
    } 

    ngOnInit() { 
      this.mdInput.required = Reflect.getMetadata('required', this.model, this.propertyString); 
     } 
    } 

}