No value accessor for form control with name: 'time' angular 11 & primeng

I am trying to learn angular and I am working with form array in Angular 11 and primeNg. I created a form array and in this array I push form group. Form group controls are batchName and batchTime. I want to show some specific time through dropdown(primeNg dropdown). All work fine but in my console, I get an error

No value accessor for form control with name: ‘time’

I try something like this

component.html

  <div
        class="col-12 p-1"
        *ngFor="let control of feilds.controls; index as i"
      >
        <ng-container [formGroup]="control" class="w-100">
          <div class="row align-items-center">
            <div class="col-6 p-1">
              <div class="form-group">
                <label for="text">Batch Name</label>
                <input
                  formControlName="name"
                  class="form-control"
                  placeholder="Batch Name"
                  type="text"
                />
              </div>
            </div>
            <div class="col-5 p-1">
              <div class="form-group">
                <label for="time">Batch Time</label>
                <p-dropdown
                  [options]="timing"
                  formControlName="time"
                  optionLabel="name"
                  id="time"
                ></p-dropdown>
              </div>
            </div>
            <div class="col-1">
              <div>
                <button
                  pButton
                  pRipple
                  type="button"
                  icon="pi pi-trash"
                  class="p-button-rounded"
                  (click)="removeFeild(i)"
                ></button>
              </div>
            </div>
          </div>
        </ng-container>
      </div

component.ts

feilds = new FormArray([]);
  timing: string[] = [
    '10:00Am',
    '11:00Am',
    '12:00',
    '1:00Pm',
    '2:00Pm',
    '3:00Pm',
    '4:00Pm',
    '5:00Pm',
    '6:00Pm',
    '7:00Pm',
  ];

  addFeild() {
    const group = new FormGroup({
      name: new FormControl('', Validators.required),
      time: new FormControl('', Validators.required),
    });
    this.feilds.push(group);
  }

  removeFeild(index: number) {
    this.feilds.removeAt(index);
  }
  prepend() {
    const group = new FormGroup({
      name: new FormControl('', Validators.required),
      time: new FormControl('', Validators.required),
    });
    this.feilds.push(group);
  }

Sorry if I do some stupid mistake

78 thoughts on “No value accessor for form control with name: 'time' angular 11 & primeng”

Leave a Comment