CODEWITHSUNDEEP
javascripthtmlangularangular2-directives
Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

reference peer(edit: parent) directive input

I am tying to use metadata to set HTML input attributes. Following the Attribute Directives Guide (https://angular.io/docs/ts/latest/guide/attribute-directives.html) I came up with the following.

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

The following input tag will have the required attribute if i use this directive.
<input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'" />
But using material2 it will not.
<md-input type="text" placeholder="Email" [(ngModel)]="model.username" name="username" [myModel]="model" [myProperty]="'username'"></md-input>
I see that the material input component has a required @Input (https://github.com/angular/material2/blob/master/src/components/input/input.ts#L159) that it passes to the native input tag. My question is how to I reference that peer directive's input from my directive? Or am I going about the the right way?

Note: The username property is defined as 

@required()
public username: string;

Where

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

Upvotes: 0

Views: 41

Answers (1)

Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

So I found out that my [myModel] directive would be considered a child to md-input not a peer in the angular2 dependency injection, so I used the following 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);
        }
    }

}

Upvotes: 0

Related Questions