Angular 4 Directive on Input element with data binding

Question

I'm trying to write an attribute directive for input elements in my forms which validates the given username if it's available or not.

I have 2 problems doing so.

1) I want to make this directive reusable by allowing it to receive the API route it should be validating usernames with. Here's what I have and as you can see it doesn't accept any input (doesn't have bindings) and it works perfectly.

import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs/Observable';

@Directive({
  selector: '[uniqueCompanyUsername]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => CompanyUsernameValidatorDirective), multi: true
    },
  ]
})
export class CompanyUsernameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {
  }

  validate(username: AbstractControl) {
    return Observable.timer(1000).switchMap(() => {
      return this.http.post(environment.apiEndpoint + '/company/username-check', {
        username: username.value
      }).map((result: any) => result.success ? null : { uniqueCompanyUsername: false });
    });
  }
}

Once I add @Input('uniqueCompanyUsername') route: string; to it and try to take the route via the directive itself it gives me this error:

Can't bind to 'uniqueCompanyUsername' since it isn't a known property of 'input'.

Here's what I wrote in my directive controller:

import { Directive, forwardRef, Input } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs/Observable';

@Directive({
  selector: '[uniqueCompanyUsername]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => CompanyUsernameValidatorDirective), multi: true
    },
  ]
})
export class CompanyUsernameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {
  }

  @Input('uniqueCompanyUsername') route: string;

  validate(username: AbstractControl) {
    return Observable.timer(1000).switchMap(() => {
      return this.http.post(`${environment.apiEndpoint}${this.route}`, {
        username: username.value
      }).map((result: any) => result.success ? null : { uniqueCompanyUsername: false });
    });
  }
}

Here's my template:

<input name="companyUsername" [(ngModel)]="company.username" id="input-username" #companyUsername="ngModel" class="form-control" placeholder="Company Username"
                [class.form-control-danger]="companyUsername.invalid && companyUsername.touched" [minlength]="3" [maxlength]="50" [required]="true"
                [uniqueCompanyUsername]="/company/username/" autofocus>

I'm frustrated and I don't simply understand what's wrong here!

Your directive should work but if you want to pass string then write [uniqueCompanyUsername]="'/company/username/'" or uniqueCompanyUsername="/company/username/" See example stackblitz.com/edit/… — yurzui
– yurzui, Commented Jan 10, 2018 at 18:30

Uğur Dinç · Accepted Answer · 2018-01-10 17:55:48Z

2

Your attribute name needs to match your Input decorator name.

Change this:

@Input('uniqueCompanyUsername') route: string;

to this:

@Input() uniqueCompanyUsername: string;

and remember to also change "this.route"s in your component to "this.uniqueCompanyUsername"s.

More info on Avoid aliasing inputs and outputs.

edited Jan 10, 2018 at 17:55

answered Jan 10, 2018 at 17:48

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mamsoudi Over a year ago

It works, thanks! But what if I want to still get the route using [uniqeCompanyUsername] and use this.router?? Like what I wrote?

Uğur Dinç Over a year ago

@mamsoudi Please check the added link. Basically, your attribute name needs to match your Input decorator name. If you want to use route, then change [uniqeCompanyUsername] to [route] in your template.

Collectives™ on Stack Overflow

Angular 4 Directive on Input element with data binding

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related