Отправка угловых шаблонно-управляемых форм в качестве почтового запроса

Question

Я хочу выяснить, как отправить все входные данные моей формы на серверную часть с помощью HTTPClient. Первоначально я отформатировал свой запрос на публикацию, используя модель newproduct. Но часть "newProduct" отправляется в моих данных json. В моем API нет "newProduct", поэтому я получаю сообщение об ошибке. Я попытался извлечь все свои входные данные из моей модели, как показано ниже. Но я не знаю, как захватить их в запросе после публикации или даже как увидеть данные json. Я не хочу использовать класс newProduct в качестве модели для формирования моей модели формы, но я хочу обернуть все свои привязки:

productName: string='';
category: Category= new Category(null,null);
fullPrice: number=null;
salePrice: number=null;
availability: boolean=null;
supplier: Supplier=null;
pdiscount: number= null;

В переменной, чтобы оценить их и отправить в мой API. Я не знаю формат для этого. Мне нужно, чтобы мои данные выглядели так: Почтальон

    {

        "productName": "Plus White",
        "category": {
            "category": 6,
            "categoryName": "Household"
        },
        "fullPrice": 125.69,
        "salePrice": 89.31,
        "availability": true,
        "supplier": {
            "supplier": 21,
            "supplierName": "CCA Industries Inc."
        },
        "discount": "71%"
    }

как здесь Вот ссылка на мой код: живой код

домашний сервис

  addProduct(product:Newproduct): Observable<Newproduct>{
    console.log('http://localhost:8080/api/product/new', product)
    return this.http.post<Newproduct>('http://localhost:8080/api/product/new', product,httpOptions);
  }

productform.ts

export class ProductFormComponent implements OnInit {

suppliers: Supplier[];
categories: Category[];
value: number;
productName: string='';
category: Category= new Category(null,null);
fullPrice: number=null;
salePrice: number=null;
availability: boolean=null;
supplier: Supplier=null;
pdiscount: number= null;
// model = new Newproduct(null,new Category( this.value,"name"),null,null,false,new Supplier(null,null),null);
GetSelectedValue(change){
  console.log(change);
}
GetSelectedValue1(change){
  console.log(change);
}
submitted = false;
// get diagnostic() { return JSON.stringify(NgForm); }

// newProduct() {
//   this.homeService.addProduct(NgForm);
// }

onSubmit() { this.submitted = true; }

  constructor(private supplierService: SupplierService,private categoryService: CategoryService,private homeService: HomeService) { }

  ngOnInit() {

    this.supplierService.getAll().subscribe(data => {
      this.suppliers = data;
    });




    this.categoryService.getAll().subscribe(data => {
      this.categories = data;
    });
  }
}

productform.html

<div class="modal fade" id="addProductForm" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add a Product</h4>
                </div>
                <div class="modal-body">
                        {{diagnostic}}
                    <form  #productForm="ngForm" (ngSubmit)="onSubmit()">
                        <div class="form-group">
                            <label for="productName">Product Name</label>
                            <input name="productName" [(ngModel)]="productName" type="text" class="form-control" id="productName" placeholder="Product Name">
                        </div>
                        <div class="form-group">
                            <label for="productCategory">Product Category</label>
                            <select  [(ngModel)]="category" #ctrl="ngModel" [(ngModel)]="selectedOption" (change)="GetSelectedValue(selectedOption)" name="category"  class="form-control" id="productCategory" >
                                <option *ngFor="let category of categories" [ngValue]="category" data-value="{{category.category}}" id={{category.categoryName}} >{{category.categoryName}}</option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="productSupplier">Product Supplier</label>
                            <!-- <input type="text" class="form-control" id="productSupplier" placeholder="Supplier"> -->
                            <select  [(ngModel)]="supplier"  [(ngModel)]="selectedOption" (change)="GetSelectedValue1(selectedOption)"name="supplier"  class="form-control" id="productSupplier" >
                                    <option *ngFor="let supplier of suppliers" [ngValue]="supplier" data-value="{{supplier.supplier}}" id={{supplier.Name}} >{{supplier.supplierName}}</option>

                                </select>
                        </div>
                        <div class="form-group">
                            <label for="productPrice">Price</label>
                            <input [(ngModel)]="fullPrice" name="fullPrice" type="number" id="productPrice">
                        </div>
                        <div class="form-group">
                            <label for="productSalePrice">Sale Price</label>
                            <input [(ngModel)]="salePrice" name="salePrice" type="number" id="productSalePrice">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input [(ngModel)]="availability" name="availability" type="checkbox"> Available
                            </label>
                        </div>
                        <button type="submit" (click)="newProduct()" class="btn btn-success">Submit</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Answer 1

Используйте модель и отправьте модель обратно на сервер. Модель представляет собой интерфейс, который описывает данные, которые собирает форма.

Вместо

[(ngModel)]="selectedOption"

Используйте

[(ngModel)]="model.selectedOption"

Тогда все ваши привязки находятся на одномобъект, который может быть передан службе для публикации в ваш бэкэнд.

Я написал несколько библиотек, которые упрощают подобные вещи, взгляните на этот StackBlitz https://stackblitz.com/edit/angular-pytks5 и одну, которая показываетмоя библиотека форм с начальной загрузкой https://stackblitz.com/edit/angular-t1wshi

Answer 2

Вы можете использовать Реактивные Формы для этого, в этом вы должны создать объект FormGroup класса ex. это

public formGroup: FormGroup;

вы импортируете его из

import { FormGroup, FormControl, Validators } from '@angular/forms';

вот код файла Ts это

this.formGroup = new FormGroup({
'productName': new FormControl('',Validators.required);
});

так что вы можете использовать все остальные ваши свойства, вы также можете использовать с ним валидаторы, как показано выше

Для этого вы можете использовать класс, вот его код.

export class User {
  Name: string;
}

Вот HTML-код

<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
<input type="text" FormControlName="Name" />
<button type="submit">Submit</button> 
</form>

При нажатии кнопки вы можете получить значение formgroup.

onFormSubmit(): void {
    console.log('Name:' + this.userForm.get('Name').value);
}

Answer 3

Вы привязываете все входные значения к переменным, а не привязываете их к свойствам объекта.

Таким образом, вместо:

productName: string='';
category: Category= new Category(null,null);
fullPrice: number=null;
salePrice: number=null;
availability: boolean=null;
supplier: Supplier=null;
pdiscount: number= null;

Вы хотите сделать:

model: newProduct = {
   productName: string='';
   category: Category= new Category(null,null);
   fullPrice: number=null;
   salePrice: number=null;
   availability: boolean=null;
   supplier: Supplier=null;
   pdiscount: number= null;
}

Все входные привязки в вашем HTML должны выглядеть примерно так:

<div class="form-group">
   <label for="productName">Product Name</label>
   <input name="productName" [(ngModel)]="model.productName" type="text" 
   class="form-control" id="productName" placeholder="Product Name">
</div>