Passing a FormControl to a child component - No value accessor for form control with unspecified name

no value accessor for form control with unspecified name attribute
control value accessor form group
angular custom form control
pass form control to component
pass form array to child component
pass formgroup to child component
form group component
reactive form component

I have an input component customInput that creates a classic input field and adds some layouting-spice to it, no additional logic.

I want to pass a formControl to it, to bind it to the input it contains.

Should be used like this:

<form [formGroup]="form">
  <custom-input [formControl]="form.controls['control']"></custom-input>
</form>

Inside Custom Input:

export class HidInputFieldComponent  {
   @Input() formControl: AbstractControl

   ...
}

<div class="container">
  <input [formControl]="formControl"/>
    <label>label</label>
</div>

Now when i initialize the component, i get

No value accessor for form control with unspecified name

Logging the control in my components constructor, it is undefined.

Am I doing it wrong or isn't there a way around ControlValueAccessor? Since I am not actually building a custom control (I still use classic input) it seems extreme

You don't need to import ControlValueAccessor or anything similar to accomplish that.

All you need to do is to pass the FormControl object to your child component like this:

<form [formGroup]="form">
  <custom-input [control]="form.get('theControlName')">
  </custom-input>
</form>

That means you custom-input component should look like this:

import {Component, Input} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'custom-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent {
  @Input() control: FormControl;
}

And the template:

<input [formControl]="control">

And that's it.

If you implement the custom input like that you won't have to bring the parent formGroup into the child component logic, it is completely unnecessary there (Unless you need to make some operations on it or on some of the rest of form controls).

Besides, passing the FormControl object to the custom input would give you access to the properties of it without referencing the FormGroup and then getting the specific control, because that's a work done on the parent component.

I hope this solution helps to simplify the work of many people as it's pretty common to make this kind of custom controls.

was that my child component had an @input named formControl . I also received this error while writing a custom form control component in Angular 7. but was accidentally passing control in input named formControl . No value accessor for form control with unspecified name attribute 2 Angular 7 Reactive forms “No value accessor for form control with unspecified name attribute”

You can also try implementing ControlValueAccessor Interface Class.

@Component({
  selector: 'app-custom-input',
  templateUrl: './app-custom-input.component.html'
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => HidInputFieldComponent)
    }
  ]
})
export class HidInputFieldComponent implements OnInit, ControlValueAccessor {
  @Output() setDropdownEvent: EventEmitter<any> = new EventEmitter();

  ngOnInit() {}

  writeValue(value: any) {}

  propagateChange(time: any) {
    console.log(time);
  }

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}
}

Passing a FormControl to a child component - No value accessor for form control with unspecified name - angular. Using controlContainer to provide parent form instance to child component then inject FormGroupDiretive to get parent form instance apptelephoneinput.component.html

Use FormGroupDirective

This directive accepts an existing FormGroup instance. It will then use this FormGroup instance to match any child FormControl, FormGroup, and FormArray instances to child FormControlName, FormGroupName, and FormArrayName directives.

Doing this you can access child formControl from parent

  @Component({
    selector: 'app-custom-input',
    templateUrl: './custom-input.html',
    viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective}]
  })    
    export class HidInputFieldComponent  {
     constructor(private fcd:FormGroupDirective) {       
    }
    ngOnInit() {
        this.fcd.form.addControl('formControl',new FormControl(''));
    }
    }

    <div class="container">
      <input [formControl]="formControl"/>
        <label>label</label>
    </div>

ERROR Error: No value accessor for form control with unspecified name and the issue was that my child component had an input named formControl. so I just How to access or pass the formControlName inside the custom component. For Re-validation, the validators will need to be on the top-level form, not at the child component, if you want it to be part of the parent form’s validation.

No value accessor for form control with unspecified name attribute access the value, we need to implement the ControlValueAccessor interface in our component. When you instantiate a new FormControl with the disabled property set to true. Different Ways to Pass Inputs to a Component in Angular. A formControl created implicitly or explicitly has to interact with a native form control like input or textarea. And instead of a native form control it’s also possible to have a custom form control created as an Angular component. A custom form control usually wraps a control that is written using pure JavaScript like jQueryUI’s slider.

This (abstract) class contains logic shared across FormControl <textarea> ) or a custom component(with the help of ControlValueAccessor - more on that later!) Its defining characteristic is that it stores its children in an array. valueAccessor) _throwError(dir, 'No value accessor for form control with'); /* . Now, onTouched() needs to be called every time form-control gets the touch event. 9. Register component to NG_VALUE_ACCESSOR: NG_VALUE_ACCESSOR is a provider that specifies a class that implements ControlValueAccessor interface. It is used by form directives to inject the value accessors.

Every child component will inherit this change detection strategy. A property you are binding to was undefined or null and then had a value set at runtime. Solution: set default Can't bind to 'formControl' since it isn't a known property of 'input'. Error: No value accessor for form control with name: 'foo'. No value accessor for form control with unspecified name attribute What Angular wants to tell you is, hey, you want to work with me, but I have no idea how to access the value of your component. For Angular to know how to access the value, we need to implement the ControlValueAccessor interface in our component.

Comments
  • your input MUST be @Input() formControl:FormControl, not AbstractControl
  • no. the code above works, the problem is just this console error that prevents rendering. if i force rerender, everything is fine
  • I read about that, but i want to find away around it. I think that should be possible in my case
  • It's not an answer to my problem though, is it?
  • I would need to define all the validators in the parent component.. That doesn't seem possible that way, or am i misunderstanding this?
  • you can validation in child form also. if you want to know more about nested form watch this youtube.com/watch?v=CD_t3m2WMM8