no value accessor for form control with unspecified name attribute - Simple solution when encountering the error

Question

I get the error message:

ERROR Error: No value accessor for form control with unspecified name attribute
  at _throwError (forms.es5.js:1918)
  at setUpControl (forms.es5.js:1828)
  at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

Has anyone ever faced this problem? How to troubleshoot the “ no value accessor for form control with unspecified name attribute” But the problem is appearing when I try to operate the following program

@Component( {
  selector: 'input-extra-field',
  template: `
  <div class="form-group" [formGroup]="formGroup" >
  <switch [attr.title]="field.etiquette" 
  [attr.value]="field.valeur" [(ngModel)]="field.valeur"
  [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
  </switch>
  <error-messages [control]="name"></error-messages>
  </div>
  `
 } )

export class SwitchExtraField extends ExtraField {
  @Input() field: ExtraFormField;
  @Input() entity: { fields: Object };
  @Input() formGroup: FormGroup;
 
  constructor( formDir: NgForm ) {
  super( null, null, formDir );
  }
 
  get disabled(): string {
  if ( this.field && !!this.field.saisissable && !this.field.saisissable ) {
  return 'disabled';
  }
  return null;
  }
 }

dhtutoria · Accepted Answer

The cause: The cause of this error perhaps is due to using [formControl] instead of [formGroup] The solution: To solve this error, you should change [formControl] to [formGroup] This is a wrong code:

@Component({
  selector: 'app-application-purpose',
  template: `
   
    
  
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder 
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
   })
  }
}

I have changed this to the right code as below:

@Component({
  selector: 'app-application-purpose',
  template: `
     
      
    
  `
 })
 export class MyComponent implements OnInit {
   formGroup: FormGroup

   constructor(
     private formBuilder: FormBuilder
   ) { }
   ngOnInit() {
     this.formGroup = this.formBuilder.group({
       formGroupProperty: '' 
     })
   }
 }

Gabriel Julien · Answer

The problem I experienced was the same as yours. My child component had a @input called formControl.

The only thing I needed was to make the following changes:

to:

ts:

@Input()
control:FormControl;

Sign Up

Sign In

Forgot Password

ITtutoria Latest Questions

no value accessor for form control with unspecified name attribute – Simple solution when encountering the error

Fixing the error: no value accessor for form control with name