传递角度表单数据

问题描述

我正在尝试将角度形式的数据传递给外部服务，但是基本形式返回的是空对象，并阻止了任何进一步的处理。尚未发现问题。我能够完成几乎与此相同的插入形式。

提前感谢您的任何建议。

我的表格

<div class="col-md-6">
    <form #currentItem="ngForm" (ngSubmit)="updateItem(currentItem.value)" autocomplete="off" novalidate>
      
      <div class="form-group" [ngClass]="{'error': currentItem.controls.name?.invalid && currentItem.controls.name?.touched}">
        <em *ngIf="currentItem.controls.name?.invalid && (currentItem.controls.name?.touched)">*</em>
        <label for="name">Item name:</label>
        <input [formControl]="name" (ngModel)="currentItem.name" name="name" required id="name" type="text" class="form-control" placeholder="name" />
      </div>
  
      <div class="form-group" [ngClass]="{'error': currentItem.controls.description?.invalid && currentItem.controls.description?.touched}">
          <em *ngIf="currentItem.controls.description?.invalid && (currentItem.controls.description?.touched)">*</em>
          <label for="description">Item Description:</label>
          <input [formControl]="description" (ngModel)="currentItem.description" name="description" required id="description" type="text" class="form-control" placeholder="description" />
      </div>
  
      <div class="form-group" [ngClass]="{'error': currentItem.controls.price?.invalid && currentItem.controls.price?.touched}">
          <em *ngIf="currentItem.controls.price?.invalid && (currentItem.controls.price?.touched)">*</em>
          <label for="price">Item Price:</label>
          <input [formControl]="price" (ngModel)="currentItem.price" name="price" required id="price" type="text" class="form-control" placeholder="price" />
      </div>
  
      <div class="form-group" [ngClass]="{'error': currentItem.controls.inventory?.invalid && currentItem.controls.inventory?.touched}">
          <em *ngIf="currentItem.controls.inventory?.invalid && (currentItem.controls.inventory?.touched)">*</em>
          <label for="inventory">Item Inventory:</label>
          <input [formControl]="inventory" (ngModel)="currentItem.inventory" name="inventory" required id="inventory" type="text" class="form-control" placeholder="inventory" />
      </div>
  
      <div class="form-group" [ngClass]="{'error': currentItem.controls.category?.invalid && currentItem.controls.category?.touched}">
          <em *ngIf="currentItem.controls.category?.invalid && (currentItem.controls.category?.touched)">*</em>
          <label for="category">Item Category:</label>
          <input [formControl]="category" (ngModel)="currentItem.category" name="category" required id="category" type="text" class="form-control" placeholder="category" />
      </div>
      
      <div class="form-group" [ngClass]="{'error': currentItem.controls.image_url?.invalid && currentItem.controls.image_url?.touched}">
        <em *ngIf="currentItem.controls.image_url?.invalid && currentItem.controls.image_url?.touched && currentItem.controls.image_url?.errors.required">*</em>
        <label for="image_url">Image:</label>
        <input [formControl]="image_url" (ngModel)="currentItem.image_url" name="image_url" required pattern=".*\/.*.(png|jpg)" id="image_url" type="text" class="form-control" placeholder="preview.png" />
        <em *ngIf="currentItem.controls.image_url?.invalid && currentItem.controls.image_url?.touched  && currentItem.controls.image_url?.errors.pattern">Must be a png or jpg url</em>
        <img [src]="currentItem.controls.image_url.value" *ngIf="currentItem.controls.image_url?.valid" />
      </div>
      
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Update</button>
        <button type="button" [disabled]="currentItem.invalid" class="btn btn-default" (click)="cancel()">Cancel</button>
      </div>
    </form>
  </div>

组件

import { Component,OnInit } from '@angular/core';
import { ActivatedRoute,Router,Params } from '@angular/router';
import { IItem } from './../../models/index';
import { ItemsService } from './../../services/index';
import { FormControl } from '@angular/forms';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-update-item',templateUrl: './update-item.component.html',styleUrls: ['./update-item.component.scss']
})
export class UpdateItemComponent implements OnInit {
  existingObject:any;
  currentItem: IItem;
  isDirty:boolean = true
  // Form Controls
  name = new FormControl('name');
  description = new FormControl('description');
  price = new FormControl('price');
  inventory = new FormControl('inventory');
  category = new FormControl('category');
  image_url = new FormControl('image_url');

  constructor(private itemsService: ItemsService,private route:ActivatedRoute,private router: Router) { }

  updateItem(formValues) {
    console.log(formValues); // temporary
    console.log(this.currentItem); // temporary
    this.itemsService.updateItem(formValues).subscribe(() => {
      this.router.navigate(['/items'])
    });
  }

  cancel() {
    this.router.navigate(['/items'])
  }

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
      this.itemsService.getItem(+params['id']).subscribe((res: any) => {
        this.existingObject = res;
        this.name.setValue(this.existingObject.name);
        this.description.setValue(this.existingObject.description);
        this.price.setValue(this.existingObject.price);
        this.inventory.setValue(this.existingObject.inventory);
        this.category.setValue(this.existingObject.category);
        this.image_url.setValue(this.existingObject.image_url);
      })  
    });
  }

}

服务

  updateItem(item) {
    let options = { headers: new HttpHeaders({'Content-Type': 'application/json'})};
    return this.http.post<IItem>(this.server_url + '/backend/items/update.php',item,options);
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）