CODEWITHSUNDEEP
angularjsangularangular2-forms
ravi
ravi

Reputation: 1088

Angular2 : EXCEPTION: No Directive annotation found on Control

I am building a custom input field component with custom validations such as decimal only numbers, minimum, maximum, etc. Later i will reuse it in various form throughout my application.

Following is the sample code of the custom input component:

import { Component } from '@angular/core';
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';
import {Control, Validators} from '@angular/common';

@Component({
  selector: 'test',
  template: `<md-input 
              placeholder="test"
              ngControl="test"
              id = "test"                    
              required>
              <md-hint *ngIf="!test.valid">Not a valid input</md-hint>
             </md-input>`,
  directives: [MD_INPUT_DIRECTIVES, Control] 
})
export class TestComponent {
  test = new Control('',Validators.required);
}

Application crashes with massage: "EXCEPTION: No Directive annotation found on Control".

I have googled various tutorials on Angular2 forms where they use the similar approach but input element is inside a form with temporary local variable for the given input is set to ngForm, as shown below:

ngControl="test"
#test = "ngForm"

My question is that, is it possible to use ngControl in input component without a form? yes then how to fix the exception?

I m using Angular 2 - RC1 with material2.

Upvotes: 0

Views: 461

Answers (1)

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

Control is not a directive, the directive you are looking for is NgFormControl. So:

import {Control,NgFormControl, Validators} from '@angular/common';

@Component({
  ...
  template: `<md-input 
              placeholder="test"
              [ngFormControl]="test"
              id = "test"                    
              required>
              <md-hint *ngIf="!test.valid">Not a valid input</md-hint>
             </md-input>`,
  directives: [MD_INPUT_DIRECTIVES, NgControl] 
})
export class TestComponent {
  test = new Control('',Validators.required);
}

Here is a plunk

Upvotes: 1

Related Questions