Question

我有一个var dropContainer = document.getElementById('dropContainer'); dropContainer.ondragover = dropContainer.ondragenter = function(evt) { dropContainer.designMode = "on"; // dropContainer.setAttribute("contenteditable", true); console.log('hover'); evt.preventDefault(); }; dropContainer.ondrop = function(evt) { console.log('drop'); evt.preventDefault(); fileInput.files = evt.dataTransfer.files; dropContainer.designMode = "off"; // dropContainer.removeAttribute("contenteditable"); //document.getElementById('thumbnail-drop-text').innerHTML = "<small>hello</small>"; }; dropContainer.dragend = function() { // if user drop outside of droppable area. // dropContainer.removeAttribute("contenteditable"); dropContainer.designMode = "off"; }字段，我按以下方式构建：

input

从此模型的列表中检索值：

<mat-form-field *ngFor="let item of nutrients">
           <input matInput type="text" name="{{item.nutrientId}}_{{i}}" placeholder="{{item.nutrientName}} ({{item.nutrientMeasurement}})..." [(ngModel)]="product.productNutrient[i].amount" />
</mat-form-field>

我有另一个模型constructor( public nutrientId?: number, public nutrientName?: string, public nutrientMeasurement?: string )：

product_nutrient

这包含在我的constructor( public nutrientId?: number, public productId?: number, public amount?: number )模型中。

product

以下是我的表格：

    constructor(
    public productId?: number,
    public productName?: string,
    public comments?: string,
    public manufacturerName?: string,
    public amount?: number,
    public measurement?: string,
    public isAdded?: boolean,
    public isConfirmed?: boolean,
    public productNutrient?: ProductNutrient[])

我希望填写<form name="addProductForm" #addProductForm="ngForm" (ngSubmit)="addProduct(addProductForm)"> <mat-form-field> <input matInput type="text" name="productName" placeholder="Product naam..." required [(ngModel)]="product.productName" #productName="ngModel" /> </mat-form-field> <mat-form-field> <input matInput type="text" name="productDescription" placeholder="Product beschrijving..." [(ngModel)]="product.productDescription" #productDescription="ngModel" /> </mat-form-field> <mat-form-field > <input matInput type="text" name="manufacturerName" placeholder="Fabrikant naam..." [(ngModel)]="product.manufacturerName" #manufacurerName="ngModel" /> </mat-form-field> <mat-form-field> <input matInput type="text" name="amount" placeholder="Hoeveelheid..." required [(ngModel)]="product.amount" /> </mat-form-field> <mat-form-field> <input matInput type="text" name="measurement" placeholder="Meeteenheid..." required [(ngModel)]="product.measurement" #measurement="ngModel" /> </mat-form-field> <mat-form-field> <input matInput type="text" name="comments" placeholder="Commentaar..." [(ngModel)]="product.comments" #comments="ngModel" /> </mat-form-field> <mat-form-field *ngFor="let item of nutrients; let i = index"> <input matInput type="text" name="{{item.nutrientId}}_{{i}}" placeholder="{{item.nutrientName}} ({{item.nutrientMeasurement}})..." [(ngModel)]="product.productNutrient[i].amount" /> </mat-form-field> </form> 在我的public productNutrient?: ProductNutrient[]模型中使用来自我的循环输入表单的值，但我无法使其工作。

我在product

中以下列方式实例化了数组

component.ts

但是当我加载表单时，我得到以下的erorr：

       this.product.productNutrient = new Array<ProductNutrient>();

Answer 1

您尝试实现的是角度

中的模板驱动形式

您只需要ngModel将其声明为表单，而不是[（ngModel）]
如果需要某些内容作为输入，您可以添加required指令
对于数组，您还需要遍历数组，并添加控制该数组的功能，如addNutrient，removeNutrient。这是一个快速的例子，可以让你前进

声明您的模型/接口，并注意，后缀?仅用于指示某些内容是可选的，因此在使用时要小心。在非可选

之前，也无法声明可选成员

因此，您可以在组件外添加

export class Nutrient {
  constructor(
    public nutrientId?: number,
    public productId?: number,
    public amount?: number,
    public nutrientName?: string,
    public nutrientMeasurement?: string ) {}
};

export class Product {
  constructor(
  public productId?: number,
  public productName?: string,
  public comments?: string,
  public manufacturerName?: string,
  public amount?: number,
  public measurement?: string,
  public isAdded?: boolean,
  public isConfirmed?: boolean,
  public productNutrient?: Nutrient[]) {}
}

在您的组件内，您可以

实例化产品创建添加/删除营养素功能以及提交按钮....或addProduct

product: Product = new Product(
    0,
    '',
    '',
    '',
    0,
    '',
    false,
    false,
    []
    );


  addProduct(form: NgForm) {

    this.product = form.value;

    console.log(this.product);
  }

  onAddNutrient() {
    this.product.productNutrient.push(new Nutrient(0, 0, 0, '', '', ));
  }
  onRemoveNutrient() {
    this.product.productNutrient.pop();
  }

然后在html中创建表单

<form  #addProductForm="ngForm" (ngSubmit)="addProduct(addProductForm)">

  <mat-form-field>
    <input matInput type="number" name="productId" placeholder="Product id..." required ngModel />
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" name="productName" placeholder="Product naam..." required ngModel />
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" name="productDescription" placeholder="Product beschrijving..."  ngModel />
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" name="manufacturerName" placeholder="Fabrikant naam..." ngModel />
  </mat-form-field>

  <mat-form-field>
    <input matInput type="number" name="amount" placeholder="Hoeveelheid..." required ngModel />
  </mat-form-field>

  <mat-form-field>
    <input matInput type="number" name="measurement" placeholder="Meeteenheid..." required ngModel />
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" name="comments" placeholder="Commentaar..." ngModel  />
  </mat-form-field>

  <br>
  <div *ngFor="let nutrient of product.productNutrient; let i = index">
    <mat-form-field >
      <input matInput type="number" name="nutrientId" placeholder="Enter Nutrient Id..." ngModel />
    </mat-form-field>
    <mat-form-field >
      <input matInput type="number" name="productId" placeholder="Enter Product Id..." ngModel />
    </mat-form-field>
    <mat-form-field >
      <input matInput type="number" name="amount" placeholder="Enter Amount..." ngModel />
    </mat-form-field>
    <mat-form-field >
      <input matInput type="number" name="amount" placeholder="Enter Nutrient Name.." ngModel />
    </mat-form-field>
    <mat-form-field >
      <input matInput type="number" name="amount" placeholder="Enter Nutrient Measurement.." ngModel />
    </mat-form-field>
  </div>


  <button (click)="onAddNutrient()" type="button"> + </button>
  <button (click)="onRemoveNutrient()" type="button"> - </button>

  <br>

  <button class="btn btn-primary"  type="submit" > Submit </button>
</form>

Angular 4表单值

1 个答案: