Angular - передать дополнительные данные формы на сервер - PullRequest
Новая
       31

Angular - передать дополнительные данные формы на сервер

0 голосов
/ 14 декабря 2018

У меня есть базовая угловая форма с prod_name, prod_desc, prod_price, которую я, конечно, хочу отправить на сервер при отправке формы.

Однако я хочу отправить дополнительный набор данных и не хочу создавать для этого скрытое поле ввода.

Итак, урезанная версия формы выглядит примерно так: 

<form [formGroup]="productForm" (ngSubmit)="onFormSubmit(productForm.value)">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Product Name" formControlName="prod_name"
           [errorStateMatcher]="matcher">

  </mat-form-field>

 <!-- Additional two form fields omitted for clarity -->

  <div class="button-row">
    <button type="submit" [disabled]="!productForm.valid" mat-flat-button color="primary"><mat-icon>save</mat-icon></button>
  </div>
</form>

В основном он вызывает onFormSubmit() и передает ему productForm.value.

Вот как выглядит контроллер, для ясности он содержит только необходимые данные: 

@Component({
//...
})
export class ProductAddComponent implements OnInit {

  productForm: FormGroup;
  updated_at: Date = null;

  constructor(private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.productForm = this.formBuilder.group({
      'prod_name' : [null, Validators.required],
      'prod_desc' : [null, Validators.required],
      'prod_price' : [null, Validators.required]
    });
  }

  onFormSubmit(form: NgForm) {
    // Here I want to add current date as well to the form data before sending it
    this.api.addProduct(form)
      .subscribe(res => {
          let id = res.id;
          this.router.navigate(['/product-details', id]);
      }, err => {
          console.log(err);
      });
  }

}

Внутри onFormSubmit() функция Я хочу передать текущую дату на сервер.
Скрытое поле в шаблоне формы не вариант.
Я хочу сделать это в функции onFormSubmit() до вызова службы, но яЯ застрял.

Буду признателен за помощь в том, как в основном установить дополнительные данные вместе с данными формы, например дату, и отправить их на сервер.

1 Ответ

0 голосов
/ 14 декабря 2018

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

  onFormSubmit(form: NgForm) {
    const dataForSubmit = {...form.value}; // copies the form data into a new variable
    dataForSubmit.otherProperty = 'what ever you want'; // add whatever data is needed
    this.api.addProduct(dataForSubmit)
      .subscribe(res => {
          let id = res.id;
          this.router.navigate(['/product-details', id]);
      }, err => {
          console.log(err);
      });
  }

В моих приложениях у меня часто есть интерфейс, определенный для всех данных.Я получаю эти данные в этот интерфейс и копирую только те поля, которые я хочу, в форму.Затем при сохранении скопируйте изменения из формы в исходный объект.

Интерфейс 

export interface Product {
  id: number;
  productName: string;
  productCode: string;
}

Конечно, идентификатор системы не отображается в пользовательском интерфейсе.

Код компонента 

// Update the data on the form
// after a get
this.productForm.patchValue({
  productName: this.product.productName,
  productCode: this.product.productCode
});

// The save
  saveProduct(): void {
    if (this.productForm.valid) {
       // Copies any changed form values over the original product values
       const p = { ...this.product, ...this.productForm.value };

       // Call the http service put to save the data `p`
    }
  }
...