时间戳

首页 > 解决方案 > 如何在模板中访问，反应形式，数组中的数组

angular - 如何在模板中访问，反应形式，数组中的数组

问题描述

我是编程的初学者，我试图理解我做错了什么。:)

我创建了一个反应式表单，其中包含一个字符串数组，该数组包含一个字符串和一个字符串数组。

它看起来像这样： 在此处输入图像描述

json 文件如下所示：

  public dbData: any =  {
    'ITEMS':[
      {
        'NAME': 'Farine',
        'QUANTITY': ['140', '60']
      }]
  };

我来是为了正确创建 FormGroup： 在此处输入图像描述

当我提交它看起来正确：

在此处输入图像描述

但我没有到达在模板中正确显示它:(

page.ts：

export class Form2Page implements OnInit, OnDestroy {
  itemsForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.itemsForm = new FormGroup({
      'items': new FormArray([])
    });
    console.log('From initForm', this.itemsForm);
  }

  onFormSubmit() {
    console.log('Submit : ', this.itemsForm.value);
  }

  onAddItems() {
    const control = new FormGroup({ name: new FormControl(''),
                                    quantity: new FormArray([])});

    (<FormArray>this.itemsForm.get('items')).push(control);
    console.log('Add From', this.itemsForm);
  }

页面.html

<ion-content>
  <div>
    {{dbData.ITEMS[0].QUANTITY[1]}}
  </div>
  <form [formGroup]="itemsForm" (ngSubmit)="onFormSubmit()">

    <ion-button type="button" (click)="onAddItems()">New Item</ion-button>

    <div formArrayName="items">
      <div *ngFor="let itemsCtrl of itemsForm.get('items').controls; let i=index">
        <h4>ITEMS</h4>

        <div [formGroupName]="i">
          <ion-label>Name :
            <input type="text" formControlName="name">
          </ion-label>
          <br>
          <div formArrayName="quantity">
            <div *ngFor="let quantityCtrl of itemsForm.get('items').controls.get('quantity').controls; let j = index">
              <ion-label>Quantity :
                <input type="text" [formControlName]="j">
              </ion-label>
              <br>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ion-button type="submit">Submit</ion-button>
  </form>
</ion-content>

谢谢你的帮助 ：）

标签： angularformsionic-framework

解决方案

我还没有在 Ionic 中实现。但是你也可以在 Ionic 中使用完全相同的东西：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

export interface Data {
  ITEMS: Array<Item>;
}

export interface Item {
  NAME: string;
  QUANTITY: Array<string>;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dbData: Data = {
    'ITEMS': [
      {
        'NAME': 'Farine',
        'QUANTITY': ['140', '60']
      }]
  };

  itemsForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.itemsForm = new FormGroup({
      'ITEMS': this.formBuilder.array(this.dbData.ITEMS.map(item => this.createItem(item)))
    });
  }

  onFormSubmit() {
    console.log('Submit : ', this.itemsForm.value);
  }

  onAddItems() {
    (<FormArray>this.itemsForm.get('ITEMS')).push(this.createItem({ NAME: '', QUANTITY: [] }));
  }

  addQuantity(i) {
    (<FormArray>(<FormArray>this.itemsForm.get('ITEMS')).at(i).get('QUANTITY')).push(this.formBuilder.control(''));
  }

  private createItem(item: Item) {
    return this.formBuilder.group({
      NAME: [item.NAME],
      QUANTITY: this.formBuilder.array(item.QUANTITY.map(item => this.formBuilder.control(item)))
    });
  }

}

在模板中：

<pre>{{ itemsForm.value | json }}</pre>

<form [formGroup]="itemsForm" (ngSubmit)="onFormSubmit()">
  <button type="button" (click)="onAddItems()">New Item</button>
  <div formArrayName="ITEMS">
    <div *ngFor="let itemsCtrl of itemsForm.get('ITEMS').controls; let i=index">
      <h4>ITEMS</h4>
      <div [formGroupName]="i">
        <label>Name :
          <input type="text" formControlName="NAME">
        </label>
        <br>
        <div formArrayName="QUANTITY">
          <div 
            *ngFor="let item of itemsCtrl.get('QUANTITY').controls; let j = index">
            <label>Quantity :
              <input type="text" [formControlName]="j">
            </label>
            <br>
          </div>
          <button (click)="addQuantity(i)">Add Quantity</button>
        </div>
      </div>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

这是您参考的工作示例 StackBlitz。

推荐阅读