2016-07-30 2 views
0

Ich bin verpflichtet, Metadaten zu verwenden, um HTML-Eingabeattribute festzulegen. In Anlehnung an den Leitfaden für Attribut-Richtlinien (https://angular.io/docs/ts/latest/guide/attribute-directives.html) habe ich Folgendes gefunden.Verweis Peer (bearbeiten: übergeordnete) Anweisung Eingabe

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 
     } 
    } 
} 

Das folgende Eingabe-Tag wird das erforderliche Attribut haben, wenn ich diese Anweisung verwende.
<input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'" />
Aber mit material2 wird es nicht.
<md-input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'"></md-input>
Ich sehe, dass die Materialeingabekomponente eine erforderliche @Input (https://github.com/angular/material2/blob/master/src/components/input/input.ts#L159) hat, die es an das native Input-Tag übergibt. Meine Frage ist, wie ich auf die Aussage der Peer-Direktive aus meiner Direktive verweisen kann. Oder gehe ich den richtigen Weg?

Hinweis: Der Benutzername Eigenschaft wird als

@required() 
public username: string; 

definiert Wo

/** 
* 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); 
} 

Antwort

0

So fand ich heraus, dass meine [myModel] Direktive in der angular2 Dependency Injection nicht ein Peer ein Kind zu md-input betrachtet werden würde , so habe ich die folgenden 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); 
     } 
    } 

} 
verwendet