表单以角度提交并通过POST将数据存储到mysql DB

如何解决表单以角度提交并通过POST将数据存储到mysql DB

请帮助，我是angel的初学者。我认为additm.component.ts中的代码在调用服务函数时存在一些问题。事情是通过POST方法将数据从表单存储到MySQL数据库。我不知道该怎么办！

这是additm.component.html

    <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()" class="formbox">
      <div class="title">
        Add New Product 
      </div>
      <div class="form">
         
          <div class="inputfield">
            <label>Category</label>
            <input list="catg"  class="input" name="titles" id="titles" placeholder="Select or type a Category" formControlName="category">
      <datalist id="catg">
        <option value="Electronics">
        <option value="Fashion">
        <option value="Home and Furniture">
        <option value="Food & Beverages ">
        <option value="Groceries">
      </datalist>
          </div>  
         <div class="inputfield">
            <label>Name</label>
            <input type="text" class="input" placeholder="Item name" formControlName="name">
         </div>  
        <div class="inputfield">
            <label>Price</label>
            <input type="text" class="input" placeholder="Price" formControlName="price">
         </div> 
          
          <div class="inputfield">
            <label>Discount Price</label>
            <input type="text" class="input" placeholder="Optional" style="font-style: italic;" formControlName="discount">
         </div> 
        <div class="inputfield">
            <label>Product Description</label>
            <textarea class="textarea" placeholder="Enter product description" formControlName="description"></textarea>
         </div> 
        
        <div class="inputfield">
          
            
          <label>Upload Item Image:</label>
          <input type="file" name="fileToUpload" id="fileToUpload" formControlName="upfile">
              
          
          </div>
          
        <div class="inputfield">
          <input type="submit" value="Add Item" class="btn">
        </div>
      </div>
  </form>

这是additm.component.ts，我对addproducts（）有问题

import { Component,OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { ProductsService } from 'src/app/services/products.service';

@Component({
  selector: 'app-additm',templateUrl: './additm.component.html',styleUrls: ['./additm.component.css']
})
export class AdditmComponent implements OnInit {
  checkoutForm;

  constructor(
  private formBuilder: FormBuilder,private productservice:ProductsService
  ) {
    this.checkoutForm = this.formBuilder.group({
      //id: [''],category: [''],name: [''],price: [''],discount: [''],description: [''],upfile: ['']
    });
  }
  
  ngOnInit(): void {
  }
  onSubmit() {
    console.log(this.checkoutForm.value);
    this.productservice.addProducts({category:"fashion",name:"asdf",price:"2323",discount:"123",upfile:"lction"})
    .subscribe(
          );
    this.checkoutForm.reset();

  }
}

这是products.service.ts

import { Injectable,EventEmitter } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Products } from '../models/products';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',})
export class ProductsService {
  public url = environment.web_api_url_base;
  constructor(private http: HttpClient) {}

  // Get all products
  getProducts(): Observable<Products[]> {
    return this.http.get<Products[]>(this.url + 'fetch_products.php').pipe(
      map((data) => {
        return data;
      })
    );
  }

  // Add product
  addProducts(data) {
    return this.http.post(this.url + 'add_products.php',data).pipe(
      map((response) => {
        return response;
      })
    );
  }

  // Delete product
  deleteProduct(id) {
    return this.http.get(this.url + 'delete_product.php?id=' + id).pipe(
      map((response) => {
        return response;
      })
    );
  }
}

解决方法

您太早重置了表单值。 您可能要尝试：

require(dplyr)
df <- mtcars
output_var <- 'disp'
rows_var <- 'cyl'
col_var <- 'am'
output_name <- paste0("Avg. ",output_var)
one_way_table <- df %>%
  group_by(eval(parse(text=rows_var)),eval(parse(text=col_var))  ) %>%
  summarise(output=mean(    eval(parse(text=output_var))     ))  

one_way_table <- data.frame(one_way_table,check.rows = F,check.names = F,stringsAsFactors = F)
colnames(one_way_table) <- c(rows_var,col_var,output_name)

unique_row_items <- unique(one_way_table[,rows_var])
unique_col_items <- unique(one_way_table[,col_var])
x_rows <- rep(unique_row_items,length(unique_col_items))
y_cols <- rep(unique_col_items,length(unique_row_items))

new_df <- data.frame(x = x_rows,y = y_cols,stringsAsFactors = F)
colnames(new_df) <- c(rows_var,col_var)

new_df <- base::merge(new_df,one_way_table,by = c(rows_var,col_var),all.x=T)
m <- matrix(new_df[,output_name],ncol= length(unique(new_df[,col_var])) )
df_matrix <- data.frame(m,stringsAsFactors = F)

,

我明白了...我稍微修改了代码，在additm.component.ts中使用了FormData：

import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';
import { ProductsService } from 'src/app/services/products.service';


@Component({
  selector: 'app-additm',templateUrl: './additm.component.html',styleUrls: ['./additm.component.css']
})
export class AdditmComponent implements OnInit {
  checkoutform: FormGroup;
  
  constructor(
  public formBuilder: FormBuilder,private productservice:ProductsService
  ) {}
  
  ngOnInit(): void {
    this.checkoutform = this.formBuilder.group({
      //id: [''],category: [''],name: [''],price: [''],discount: [''],description: [''],upfile: ['']
    });
  }
  onSubmit() {
    var formData: any = new FormData();
    formData.append("category",this.checkoutform.get('category').value);
    formData.append("name",this.checkoutform.get('name').value);
    formData.append("price",this.checkoutform.get('price').value);
    formData.append("discount_price",this.checkoutform.get('discount').value);
    formData.append("description",this.checkoutform.get('description').value);
    formData.append("image",this.checkoutform.get('upfile').value);
    console.log(this.checkoutform.value);
    this.productservice.addProducts(formData)//    this.productservice.addProducts(this.checkoutform.values)
    .subscribe(
      response => console.log('Success=from component',response),error => console.log('!!!Error',error)
    );
    this.checkoutform.reset();

  }
}