Блог

Пожалуйста, помогите, я новичок в angular. Я думаю, что есть какая-то проблема с моим кодом в additm.component.ts, где вызывается служебная функция. дело в том, чтобы сохранить данные из формы в базу данных MySQL с помощью метода POST. Я не знаю, что делать!!

Это 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 amp; 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;
      })
    );
  }
}

  

Вы слишком рано сбрасываете значения формы. Возможно, вы захотите попробовать:

     onSubmit() {
        console.log(this.checkoutForm.value); 
 this.productservice.addProducts({category:"fashion",name:"asdf",price:"2323", discount:"123",upfile:"lction"})
        .subscribe(res => {
            this.checkoutForm.reset();
        });  
      }
  

Я понял … я немного изменил код, использовал FormData в additm.component.ts:

 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();

  }
}