ERROR Error: No value accessor for form control with unspecified name

Question

I am getting this error in my code

here is the code

<div class="col-lg-6 col-12 p-0">
                            <div class="form-group row align-items-center justify-content-center mb-3">
                                <label class="col-lg-3 col-12 text-left">
                                    {{'MUSICAL.NOTES.PROMOTIONALIMAGE' | translate }}
                                </label>
                                <div class="col-lg-9 col-12">
                                    <div class="d-flex align-items-start flex-column upload-thumbnail-btn">
                                        <label class="btn btn-primary" for="files"> {{'MUSICAL.NOTES.PROMOTIONALIMAGE' |
                                            translate }}</label>
                                        <input id="files" style="display:none;" type="file"
                                            (change)="fileChangeEvent($event,2)">
                                        <label for="" class="w-100"
                                        id="lblPROMOTIONALIMAGE"
                                         formControlName="PROMOTIONALIMAGE" 
                                         [(ngModel)]="MusicalNoteForm['PROMOTIONALIMAGE']"
                                         
                                         ></label>
                                    </div>
                                </div>
                            </div>
                        </div>



constructor(public formBuilder: FormBuilder, public musicalnote: MusicalNotesService, private date: DateService) {
    this.MusicalNoteForm = this.formBuilder.group({
      ID: [],// الرقم يحدد ان كانت اضافة ام تعديل
      currentID: [0],
      callNumber: [''],
      MainClassification: ['', Validators.required],
      subClassificationID: [0, Validators.required],
      title: ['', Validators.required],
      titleEN: [''],
      musicalScaleID: [0],
      musicalInstrumentID: [0],
      genreID: [1],
      PagesNO: [0, Validators.required],
      PublisherID: ['', Validators.required],
      PublishDate: ['', Validators.required],
      CountryID: ['', Validators.required],
      CityID: ['', Validators.required],
      PersonTypeID: ['', Validators.required],
      PersonID: ['', Validators.required],
      MusicalSeries: [''],
      MusicalSeriesEN: [''],
      SubjectHeadings: [''],
      SubjectHeadingsEN: [''],
      RelatedSubjects: [''],
      EditionNumber: [0, Validators.required],
      CopyrightID: ['', Validators.required],
      Notes: [''],
      UPLOADFILE: [' '],
      PROMOTIONALIMAGE: [' ']
    });
  }

Does this answer your question? [ERROR Error: No value accessor for form control with unspecified name attribute on switch](https://stackoverflow.com/questions/46422007/error-error-no-value-accessor-for-form-control-with-unspecified-name-attribute) — Yong Shun, Jun 09 '21 at 01:42

score 1 · Answer 1 · answered Jun 09 '21 at 00:37

The label element do not have a Control Value Accessor. The Control Value Accessor is an interface between angular forms and the native DOM element. To use a FormControl on the label you wiil need to implement your custom Value Accessor to handle the image Take a look at the docs https://angular.io/api/forms/ControlValueAccessor#description

ERROR Error: No value accessor for form control with unspecified name

1 Answers1