Angular4 - No value accessor for form control

Question

I have a custom element     lt div formControlName  surveyType  gt     lt div  ngFor  let type of surveyTypes          click   onSelectType type           class selected   type     selectedType  gt       lt md-icon gt    type icon    lt  md-icon gt       lt span gt    type description    lt  span gt     lt  div gt   lt  div gt    When I try to add the formControlName  I get an error message      ERROR Error  No value accessor for form control with name     surveyType    I tried to add ngDefaultControl without success  It seems it s because there is no input select    and I dont know what to do   I would like to bind my click to this formControl in order that when someone clicks on the entire card that would push my  type  into the formControl  Is it possible

User · Answer

For me it was due to  multiple  attribute on select input control as Angular has different ValueAccessor for this type of control   const countryControl   new FormControl      And inside template use like this       lt select multiple name  countries   formControl   countryControl  gt         lt option  ngFor  let country of countries   ngValue   country  gt            country name           lt  option gt       lt  select gt    More details ref Official Docs

User · Answer

You should use formControlName  quot surveyType quot  on an input and not on a div

User · Answer

The error means  that Angular doesn t know what to do when you put a formControl on a div  To fix this  you have two options    You put the formControlName on an element  that is supported by Angular out of the box  Those are  input  textarea and select  You implement the ControlValueAccessor interface  By doing so  you re telling Angular  how to access the value of your control   hence the name   Or in simple terms  What to do  when you put a formControlName on an element  that doesn t naturally have a value associated with it    Now  implementing the ControlValueAccessor interface can be a bit daunting at first  Especially because there isn t much good documentation of this out there and you need to add a lot of boilerplate to your code  So let me try to break this down in some simple-to-follow steps   Move your form control into its own component  In order to implement the ControlValueAccessor  you need to create a new component  or directive   Move the code related to your form control there  Like this it will also be easily reusable  Having a control already inside a component might be the reason in the first place  why you need to implement the ControlValueAccessor interface  because otherwise you will not be able to use your custom component together with Angular forms   Add the boilerplate to your code  Implementing the ControlValueAccessor interface is quite verbose  here s the boilerplate that comes with it   import  Component  OnInit  forwardRef  from   angular core   import  ControlValueAccessor  FormControl  NG VALUE ACCESSOR  from   angular forms      Component     selector   app-custom-input     templateUrl     custom-input component html     styleUrls      custom-input component scss          a  copy paste this providers property  adjust the component name in the forward ref    providers                provide  NG VALUE ACCESSOR        useExisting  forwardRef      gt  CustomInputComponent         multi  true                 b  Add  implements ControlValueAccessor  export class CustomInputComponent implements ControlValueAccessor         c  copy paste this code   onChange  any        gt       onTouch  any        gt       registerOnChange fn  any   void       this onChange   fn        registerOnTouched fn  any   void       this onTouch   fn            d  copy paste this code   writeValue input  string           TODO       So what are the individual parts doing    a  Lets Angular know during runtime that you implemented the ControlValueAccessor interface b  Makes sure you re implementing the ControlValueAccessor interface c  This is probably the most confusing part  Basically what you re doing is  you give Angular the means to override your class properties methods onChange and onTouch with it s own implementation during runtime  such that you can then call those functions  So this point is important to understand  You don t need to implement onChange and onTouch yourself  other than the initial empty implementation   The only thing your doing with  c  is to let Angular attach it s own functions to your class  Why  So you can then call the onChange and onTouch methods provided by Angular at the appropriate time  We ll see how this works down below  d  We ll also see how the writeValue method works in the next section  when we implement it  I ve put it here  so all required properties on ControlValueAccessor are implemented and your code still compiles    Implement writeValue  What writeValue does  is to do something inside your custom component  when the form control is changed on the outside  So for example  if you have named your custom form control component app-custom-input and you d be using it in the parent component like this    lt form  formGroup   form  gt     lt app-custom-input formControlName  myFormControl  gt  lt  app-custom-input gt   lt  form gt    then writeValue gets triggered whenever the parent component somehow changes the value of myFormControl  This could be for example during the initialization of the form  this form   this formBuilder group  myFormControl         or on a form reset this form reset      What you ll typically want to do if the value of the form control changes on the outside  is to write it to a local variable which represents the form control value  For example  if your CustomInputComponent revolves around a text based form control  it could look like this   writeValue input  string      this input   input      and in the html of CustomInputComponent    lt input type  text          ngModel   input  gt    You could also write it directly to the input element as described in the Angular docs   Now you have handled what happens inside of your component when something changes outside  Now let s look at the other direction  How do you inform the outside world when something changes inside of your component   Calling onChange  The next step is to inform the parent component about changes inside of your CustomInputComponent  This is where the onChange and onTouch functions from  c  from above come into play  By calling those functions you can inform the outside about changes inside your component  In order to propagate changes of the value to the outside  you need to call onChange with the new value as the argument  For example  if the user types something in the input field in your custom component  you call onChange with the updated value    lt input type  text          ngModel   input          ngModelChange   onChange  event   gt    If you check the implementation  c  from above again  you ll see what s happening  Angular bound it s own implementation to the onChange class property  That implementation expects one argument  which is the updated control value  What you re doing now is you re calling that method and thus letting Angular know about the change  Angular will now go ahead and change the form value on the outside  This is the key part in all this  You told Angular when it should update the form control and with what value by calling onChange  You ve given it the means to  access the control value    By the way  The name onChange is chosen by me  You could choose anything here  for example propagateChange or similar  However you name it though  it will be the same function that takes one argument  that is provided by Angular and that is bound to your class by the registerOnChange method during runtime   Calling onTouch  Since form controls can be  touched   you should also give Angular the means to understand when your custom form control is touched  You can do it  you guessed it  by calling the onTouch function  So for our example here  if you want to stay compliant with how Angular is doing it for the out-of-the-box form controls  you should call onTouch when the input field is blurred    lt input type  text           ngModel    input          ngModelChange   onChange  event           blur   onTouch    gt    Again  onTouch is a name chosen by me  but what it s actual function is provided by Angular and it takes zero arguments  Which makes sense  since you re just letting Angular know  that the form control has been touched   Putting it all together  So how does that look when it comes all together  It should look like this      custom-input component ts import  Component  OnInit  forwardRef  from   angular core   import  ControlValueAccessor  FormControl  NG VALUE ACCESSOR  from   angular forms      Component     selector   app-custom-input     templateUrl     custom-input component html     styleUrls      custom-input component scss          Step 1  copy paste this providers property   providers                provide  NG VALUE ACCESSOR        useExisting  forwardRef      gt  CustomInputComponent         multi  true                 Step 2  Add  implements ControlValueAccessor  export class CustomInputComponent implements ControlValueAccessor         Step 3  Copy paste this stuff here   onChange  any        gt       onTouch  any        gt       registerOnChange fn  any   void       this onChange   fn        registerOnTouched fn  any   void       this onTouch   fn            Step 4  Define what should happen in this component  if something changes outside   input  string    writeValue input  string        this input   input            Step 5  Handle what should happen on the outside  if something changes on the inside      in this simple case  we ve handled all of that in the  html      a  we ve bound to the local variable with ngModel      b  we emit to the ouside by calling onChange on ngModelChange         custom-input component html  lt input type  text           ngModel    input          ngModelChange   onChange  event           blur   onTouch    gt       parent component html  lt app-custom-input  formControl   inputTwo  gt  lt  app-custom-input gt      OR   lt form  formGroup   form   gt     lt app-custom-input formControlName  myFormControl  gt  lt  app-custom-input gt   lt  form gt    More Examples   Example with Input  https   stackblitz com edit angular-control-value-accessor-simple-example-tsmean Example with Lazy Loaded Input  https   stackblitz com edit angular-control-value-accessor-lazy-input-example-tsmean Example with Button  https   stackblitz com edit angular-control-value-accessor-button-example-tsmean   Nested Forms  Note that Control Value Accessors are NOT the right tool for nested form groups  For nested form groups you can simply use an  Input   subform instead  Control Value Accessors are meant to wrap controls  not groups  See this example how to use an input for a nested form  https   stackblitz com edit angular-nested-forms-input-2  Sources   https   angular io api forms ControlValueAccessor https   www tsmean com articles angular angular-control-value-accessor-example

User · Answer

You can use formControlName only on directives which implement ControlValueAccessor   Implement the interface  So  in order to do what you want  you have to create a component which implements ControlValueAccessor  which means implementing the following three functions    writeValue  tells Angular how to write value from model into view  registerOnChange  registers a handler function that is called when the view changes  registerOnTouched  registers a handler to be called when the component receives a touch event  useful for knowing if the component has been focused     Register a provider  Then  you have to tell Angular that this directive is a ControlValueAccessor  interface is not gonna cut it since it is stripped from the code when TypeScript is compiled to JavaScript   You do this by registering a provider    The provider should provide NG VALUE ACCESSOR and use an existing value  You ll also need a forwardRef here  Note that NG VALUE ACCESSOR should be a multi provider   For example  if your custom directive is named MyControlComponent  you should add something along the following lines inside the object passed to  Component decorator   providers             provide  NG VALUE ACCESSOR      multi  true      useExisting  forwardRef      gt  MyControlComponent           Usage  Your component is ready to be used  With template-driven forms  ngModel binding will now work properly   With reactive forms  you can now properly use formControlName and the form control will behave as expected   Resources   Custom Form Controls in Angular by Thoughtram Angular Custom Form Controls with Reactive Forms and NgModel by Cory Rylan

[javascript] Angular4 - No value accessor for form control

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to angular4-forms