No value accessor for form control with name: 'eventGraphicAttachment'

Question

I am working on an Angular project and have some errors when building the project. I am using the material design. But I am not sure how can I solve this problem. Please have a look and help me.

This is component code.

export class TestComponent {
    ...
    public createEventGroup: FormGroup

    public constructor(
        ...
    ) {
        this.createEventGroup = new FormGroup({
            eventName: new FormControl(),
            eventDescription: new FormControl(),
            eventGraphicAttachment: new FormControl(''),
            ...
        });
    }
...

This is HTML code

<mat-form-field class="event-graphic">
  <mat-label>Event Graphic</mat-label>
  <ngx-mat-file-input placeholder="Basic Input" formControlName="eventGraphicAttachment">
  </ngx-mat-file-input>
  <mat-icon matSuffix>folder</mat-icon>
</mat-form-field>

And this is the error log

core.js:6210 ERROR Error: No value accessor for form control with name: 'eventGraphicAttachment'
    at _throwError (forms.js:1732)
    at setUpControl (forms.js:1506)
    at FormGroupDirective.addControl (forms.js:5253)
    at FormControlName._setUpControl (forms.js:5835)
    at FormControlName.ngOnChanges (forms.js:5780)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1520)
    at callHook (core.js:2583)
    at callHooks (core.js:2542)
    at executeInitAndCheckHooks (core.js:2493)
    at refreshView (core.js:9481)

Post the typescript code where the form group is declared and built. That way you might get an answer rather than guesses. — R. Richards, May 28 '21 at 12:51
Just added. Please have a look at it. Which part of the code do you want else? — , May 28 '21 at 12:57
https://stackoverflow.com/questions/45659742/angular4-no-value-accessor-for-form-control — Ben Racicot, May 11 '23 at 12:23

score 7 · Accepted Answer · answered May 28 '21 at 19:29

You should add ngDefaultControl to the element which has formControlName. So the code should be like this:

<mat-form-field class="event-graphic">
  <mat-label>Event Graphic</mat-label>
  <ngx-mat-file-input placeholder="Basic Input" formControlName="eventGraphicAttachment" ngDefaultControl>
  </ngx-mat-file-input>
  <mat-icon matSuffix>folder</mat-icon>
</mat-form-field>

0xdw · Answer 2 · 2021-05-28T12:25:42.987

2

You should have missed the form control name from your form group. It should look like below,

For more details: https://angular.io/guide/reactive-forms#grouping-form-controls

formGroup = new FormGroup({
    eventGraphicAttachment: new FormControl('')
});

edited May 28 '21 at 12:25

answered May 28 '21 at 12:18

0xdw

3,755
2
25
40

I've already added that code to the component file. But it doesn't work. – May 28 '21 at 12:23
Maybe you have a different form group – 0xdw May 28 '21 at 12:37
No, same form group. – May 28 '21 at 12:43

No value accessor for form control with name: 'eventGraphicAttachment'

2 Answers2