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