I am attempting to link API values to HTML using *ngFor, and here is the code I have:
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 class="row text-box-margin" >
<div class="col-md-5">
<p class="label-margin">Quantity for {{location.label}}</p>
</div>
<div class="col-md-7">
<input type="text" nbInput fullWidth status="primary" [(ngModel)]="location.quantity" placeholder="Quantity">
</div>
</div>
</div>
</nb-card-body>
</nb-card>
StoreLocations = new Array() array is defined as this. 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;
}
The array will be filled using an Angular resolver, so when the form loads, the 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 Message Received
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)
Why am I getting this error even though the values are present..?
As soon as I remove
[(ngModel)]="location.quantity"Imports in TypeScript 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';