Tagid and typename textboxes are currently holding routed values from customer component, but are not being saved into the database when I clicked on save button. In other words, routing the dynamic data from customer component to details component textboxes were successfully, but they are not saving in the database. It is showing null in their respective fields in the database table. My requirement is to save the dynamic route data in typename and tagid textbox into database using Ng Form. Below are methods I had tried.

group1 textbox

Textbox1         Textbox2     
tagid= '103',    Typename= 'Store keeping', 

CustomerComponent.ts

onClick2(event: MouseEvent, data: any) {
  this.router.navigate(['/details'], { queryParams: { tagid: data.TagId, typename: data.Typename} 
});

DetailsComponent.ts

public typename: string;
public tagid: string;

ngOnInit() {
  this.route.queryParams.subscribe((params) => {
    this.tagid = params['tagid'];
    this.typename= params['typename'];      
  });
}

onSubmit(form: NgForm){
this.service.formSubmitted = true;    

//appetite 
if (form.valid) {
  this.service.postappetite()
  .subscribe({next: res => {        
    console.log(res);
    this.toastr.success('Saved Successful');     
      
  },
  
  error: err => {console.log(err)}
  })
}
else {
  this.toastr.error('Please Enter Your Data ');
}
}

Details html

<form id="formId" #form="ngForm" (submit)="onSubmit(form)">
  <input  id="Typename" name="Typename" [ngModel]="typename" [(ngModel)]="service.formappetite.Typename">    
  <input  id="TagId" name="TagId"  [ngModel]="tagno" [(ngModel)]="service.formappetite.TagId">   
            
  <button type="submit" >Save</button>
</form>

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DataMeasure} from './data-model'; 

@Injectable({
providedIn: 'root'})

export class MeasurelService {
  public typename: string;
  public tagid: string;

  constructor(private http:HttpClient) { }

  formappetite:DataMeasure = new DataMeasure();

  formSubmitted: boolean = false;  
  readonly baseurlanimal = 'api/InventoryAPI'

  postappetite(tagno: string, animal: string){
    return this.http.post(this.baseurlanimal, this.formappetite);
  }

}

Expected output

Tagid and typename textboxes are currently holding routed values from customer component, but are not being saved into the database when I clicked on save button. In other words, routing the dynamic data from customer component to details component textboxes were successfully, but they are not saving in the database. It is showing null in their respective fields in the database table. My requirement is to save the dynamic route data in typename and tagid textbox into database using Ng Form. Below are methods I had tried.

group1 textbox

Textbox1         Textbox2     
tagid= '103',    Typename= 'Store keeping', 

CustomerComponent.ts

onClick2(event: MouseEvent, data: any) {
  this.router.navigate(['/details'], { queryParams: { tagid: data.TagId, typename: data.Typename} 
});

DetailsComponent.ts

public typename: string;
public tagid: string;

ngOnInit() {
  this.route.queryParams.subscribe((params) => {
    this.tagid = params['tagid'];
    this.typename= params['typename'];      
  });
}

onSubmit(form: NgForm){
this.service.formSubmitted = true;    

//appetite 
if (form.valid) {
  this.service.postappetite()
  .subscribe({next: res => {        
    console.log(res);
    this.toastr.success('Saved Successful');     
      
  },
  
  error: err => {console.log(err)}
  })
}
else {
  this.toastr.error('Please Enter Your Data ');
}
}

Details html

<form id="formId" #form="ngForm" (submit)="onSubmit(form)">
  <input  id="Typename" name="Typename" [ngModel]="typename" [(ngModel)]="service.formappetite.Typename">    
  <input  id="TagId" name="TagId"  [ngModel]="tagno" [(ngModel)]="service.formappetite.TagId">   
            
  <button type="submit" >Save</button>
</form>

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DataMeasure} from './data-model'; 

@Injectable({
providedIn: 'root'})

export class MeasurelService {
  public typename: string;
  public tagid: string;

  constructor(private http:HttpClient) { }

  formappetite:DataMeasure = new DataMeasure();

  formSubmitted: boolean = false;  
  readonly baseurlanimal = 'api/InventoryAPI'

  postappetite(tagno: string, animal: string){
    return this.http.post(this.baseurlanimal, this.formappetite);
  }

}

Expected output

• html
• angular
• angular-forms
• ngmodel

1 Answer 1

Instead of storing the form properties on the service, store them on the form itself. This is better because your state is located in the component and keeps your service clean when you are using multiple components. The form controls should only exist on the component level, since there is no reason to share them, if you want to share the property (between components) only then it should be kept on the service level.

public typename: string;
public tagid: string;

ngOnInit() {
  this.route.queryParams.subscribe((params) => {
    this.tagid = params['tagid'];
    this.typename= params['typename'];      
  });
}

onSubmit(form: NgForm){
this.service.formSubmitted = true;    

//appetite 
if (form.valid) {
  this.service.postappetite(this.tagid, this.typename)
  .subscribe({    
    next: res => {        
      console.log(res);
      this.toastr.success('Saved Successful');  
    },
    error: err => {console.log(err)}
  })
}
else {
  this.toastr.error('Please Enter Your Data ');
}

Update the HTML like below.

<form id="formId" #form="ngForm" (ngSubmit)="onSubmit(form)">
  <input  id="Typename" name="Typename" [(ngModel)]="typename">    
  <input  id="TagId" name="TagId" [(ngModel)]="tagid">   
            
  <button type="submit" >Save</button>
</form>

Please update the service to accept the component values.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DataMeasure} from './data-model'; 

@Injectable({
providedIn: 'root'})

export class MeasurelService {
  public animal: string;
  public tagno: string;

  constructor(private http:HttpClient) { }


  formSubmitted: boolean = false;  
  readonly baseurlanimal = 'api/InventoryAPI'

  postappetite(tagid: string, typename: string){
    const formappetite: DataMeasure = new DataMeasure();
    formappetite.tagid = tagid;
    formappetite.typename = typename;
    return this.http.post(this.baseurlanimal, formappetite);
  }

}