I have watched all the videos regarding the In-memory web API and diligently followed all the steps and instructions. However, I am still encountering a 404 Error. Please inform me if I missed something or made an error.
I have attempted to troubleshoot and conduct research on this matter, but unfortunately, my efforts have proven unsuccessful.
MY .TS
this.serialForm = this.fb.group({
id:[0],
itemCode:['', Validators.required],
qtyReceived:[0, Validators.required],
inputs: this.fb.array([this.CreateArray()]),
});
this.serialForm.get('qtyReceived').valueChanges.subscribe((res) => {
for (let i = this.displayArray.length; i < res; i++) {
this.displayArray.push(this.CreateArray());
console.log(this.displayArray);
}
});
this.dataValues = this.serialForm.get('qtyReceived').setValue(this.data.qtyReceived),
this.dataValues = this.serialForm.get('itemCode').setValue(this.data.propertyNo)
}
get displayArray():FormArray{
return this.serialForm.get('inputs') as FormArray;
}
CreateArray():FormGroup{
return new FormGroup({
serialNum: new FormControl('', {validators: [Validators.required]}),
});
}
onSave(): void {
if(this.serialForm.valid){
this.service.add(this.serialForm.value).subscribe((res)=>{
console.log(res)
})
}
}
HTML
<mat-dialog-content>
<form [formGroup]="serialForm">
<mat-form-field class="full-width" floatLabel="always" appearance="outline" [hidden]="true">
<mat-label>Id</mat-label>
<input matInput type="text" formControlName="id">
</mat-form-field>
<div class ="row">
<div class="col">
<mat-form-field class="full-width">
<mat-label>Item</mat-label>
<input matInput type="text" formControlName="itemCode" readonly="true">
</mat-form-field>
</div>
<div class="col-sm-2">
<mat-form-field class="full-width">
<mat-label>Serial Per Qty</mat-label>
<input matInput type="number" formControlName="qtyReceived" readonly="true">
</mat-form-field>
</div>
</div>
<div
*ngFor="let addressGroup of serialForm.get('inputs')['controls']; let i = index"
[formGroup]="addressGroup"
>
<div class="row">{{i + 1}}<div> <input type="text" formControlName="serialNum" style="width:685px"></div>
</div>
</div>
<div class="d-flex justify-content-center button-row">
<button mat-raised-button color="primary" class="button" (click)="onSave()" [disabled]="serialForm.invalid">
<mat-icon>check_circle_outline</mat-icon>
{{actionBtn}}
</button>
<button mat-raised-button color="warn" class="button">
<mat-icon>clear_all</mat-icon>
Clear
</button>
</div>
</form>
When using In-Memory Web Api, I tried using the console.log(user) command but it did not show up in my console. Is this normal or do I need to make some adjustments?
@Injectable({
providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const users = [
{ id: 11, itemCode: 'ICT000000211', qtyReceived:0, inputs:[{
serialNum:'string'
}] },
{ id: 12, itemCode: 'ICT000000212', qtyReceived:0, inputs:[{
serialNum:'string'
}] },
{ id: 13, itemCode: 'ICT000000213', qtyReceived:0, inputs:[{
serialNum:'string'
}] },
{ id: 14, itemCode: 'ICT000000214', qtyReceived:0, inputs:[{
serialNum:'string'
}] },
{ id: 15, itemCode: 'ICT000000215', qtyReceived:0, inputs:[{
serialNum:'string'
}] },
{ id: 16, itemCode: 'ICT000000216', qtyReceived:0, input:[{
serialNum:'string'
}] },
];
console.log(users)
return { users };
}
}
Services
export class SerialCodeService {
private tempUrl = 'api/users';
constructor(private http: HttpClient, private appsetting:AppSettings) { }
getHeroes(){
return this.http.get(this.appsetting.baseURL + 'users')
}
/** POST: add a new hero to the database */
add(data:any) {
return this.http.post(this.appsetting.baseURL + 'users', data)
}
MODEL
import { serialDTO } from "./serialDTO";
export class SerialCodeDTO {
id:number
itemCode:string
qtyReceived:number
inputs:serialDTO[];
}
export class serialDTO {
serailNum:string
}
Module
MatTreeModule,
MatSortModule,
NgxMatSelectSearchModule,
SelectDropDownModule,
HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
dataEncapsulation:false, })
],
})
https://i.sstatic.net/oVLBg.png https://i.sstatic.net/I9C8J.png