Angular Array Value Bin from ngModel giving error-CodePudding

I'm Trying to bind values coming from API to HTML using *ngFor here is the code

HTML

<nb-card accent="info">
  <nb-card-header>Item Quantity</nb-card-header>
  <nb-card-body>
    <div *ngFor="let location of StoreLocations;let i=index">
      <div  >
          <div >
              <p >Quantity for {{location.label}}</p>
          </div>
          <div >
            <input type="text" nbInput fullWidth status="primary" [(ngModel)]="location.quantity"  placeholder="Quantity">
          </div>
        </div>
    </div>

  </nb-card-body>
</nb-card>

StoreLocations = new Array() array define as this.and here is the definition of ILocationInfo

export class ILocationInfo
{
  value = new String;
  label = new String;
  street = new String;
  unit = new String;
  city = new String;
  zip = new String;
  state = new String;
  country = new String;
  quantity = new Number;
  selected = new Boolean;

}

Array will fill using angular resolver so. when form load values are there

constructor code

  constructor(private apiservice : ApiServiceService,private route: ActivatedRoute, private formbuilder:FormBuilder) {

    this.route.data.pipe(map((data:any)=>data.cres)).subscribe((locations : Array<ILocationInfo>)=>{
      console.log(locations);
      this.StoreLocations = locations;

    });
   }

Error I'm Getting

core.mjs:6495 ERROR Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201
    at throwProviderNotFoundError (core.mjs:245)
    at notFoundValueOrThrow (core.mjs:3324)
    at lookupTokenUsingModuleInjector (core.mjs:3359)
    at getOrCreateInjectable (core.mjs:3461)
    at Module.ɵɵdirectiveInject (core.mjs:14720)
    at NodeInjectorFactory.NgControlStatus_Factory [as factory] (forms.mjs:1343)
    at getNodeInjectable (core.mjs:3556)
    at instantiateAllDirectives (core.mjs:10317)
    at createDirectivesInstances (core.mjs:9666)
    at ɵɵelementStart (core.mjs:14864)

so why i'm getting this error even values are there ..?

as soon as i remove [(ngModel)]="location.quantity" i'm not getting any error.can some one point out me how to achieve this

Imports in Ts file

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup ,FormsModule} from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';
import { ApiServiceService } from 'src/app/API/api-service.service';
import { ILocationInfo } from 'src/app/Models/Inventory/models';

CodePudding user response：

It looks like you have not imported the forms modules.

...
import { FormsModule, ... } from '@angular/forms';

@NgModule({
  imports: [..., FormsModule, ...],
  ...
})
export class AppModule {...}