html - How to save the value of textbox with dynamic route data into database? - Stack Overflow

admin管理员组

文章数量:1391975

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	Typename
101	Dairy
102	Sales

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	Typename
101	Dairy
102	Sales

• html
• angular
• angular-forms
• ngmodel

Share Improve this question Follow edited Mar 12 at 12:25 Samal asked Mar 12 at 10:47 SamalSamal 7566 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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);
  }

}

本文标签： htmlHow to save the value of textbox with dynamic route data into databaseStack Overflow