Angular如何在表单数组中获取值？答案

【问题标题】：Angular How to get value in form array?Angular如何在表单数组中获取值？
【发布时间】：2019-12-13 03:02:23
【问题描述】：

我想从所有表单数组的实例中获取“onduty”值。我在 html 中试过这个：

<span *ngFor="let day of workDayandTime.controls;let i= index;">
 {{day.onduty}}
</span>

但我无法获得任何价值。

这是 json 中 workDayandTime 的值： workDayandTime form array

表格：

class employerShortForm extends FormGroup {
    constructor(fb: FormBuilder) {
        super({
            employer: fb.group({
                name: new FormControl('',Validators.required),
            }),
            employee: fb.group({
                name: new FormControl('', Validators.required)
            }),
            contractStart: new FormControl(''),
            contractEnd: new FormControl(''),
            workAddress: new FormControl('', Validators.required),
            work: new FormControl('', Validators.required),
            workDayandTime: fb.array([]),
            wageType: new FormControl(''),
            wage: new FormControl(''),
            bonus: new FormControl(''),
            otherWage: fb.array([]),
            otherwageRadio: new FormControl(''),
            overTimeAddRate: new FormControl(''),
            payDateType: new FormControl(''),
            payDate: new FormControl(''),
            payMethod: new FormControl(''),
            insurance1: new FormControl(''),
            insurance2: new FormControl(''),
            insurance3: new FormControl(''),
            insurance4: new FormControl(''),
            company: fb.group({
                name: new FormControl('', Validators.required),
                phone: new FormControl('', Validators.required),
                address: new FormControl('', Validators.required),
            }),
            ownerName: new FormControl('', Validators.required),
            employeeEmail: new FormControl('', Validators.required),
        });
    }

}

short-time-paper.ts

import { employerShortForm, employeeContForm, DataHandling, otherWage, workDayandTime} from '../../../contract-form'
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
import { Component, AfterViewInit, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { IonicPage, ViewController, ModalController, NavParams, Alert, NavController, Checkbox, Platform } from 'ionic-angular';

@Component({
  selector: 'app-short-time-paper',
  templateUrl: 'short-time-paper.html',
})
export class ShortTimePaperComponent implements AfterViewInit{
  public employerForm: employerShortForm = new employerShortForm(this.fb);
  ngAfterViewInit() {
    this.addworkDayandTime();
  }
get workDayandTime(): FormArray{
    return this.employerForm.get('workDayandTime') as FormArray;
  }
  
  public addworkDayandTime() {
    for (let i = 0; i < 7; i++) {
      this.workDayandTime.push(this.fb.group(new workDayandTime()));
    }
  }
}

short-time-paper.html

    <form [formGroup]="employerForm">
          <span *ngFor="let day of workDayandTime.controls;let i= index;">
            {{day.onduty}}
            <span *ngIf="day.onduty=='false'">{{getDays(i)}},&nbsp;</span>
          </span>
    </form>

我删除了其他代码，但关于 formarray，我想知道的是如何在数组中获取每个实例的“值班”值。对不起，我缺少英语。但如果你帮助解决这个问题。这对我来说将是很大的乐趣。谢谢。

【问题讨论】：

workDayandTime 的值在哪里？
通过get函数的workDayandTime()获取值。所以当我在表单中输入值时，我可以获得值
get workDayandTime(): FormArray{ return this.employerForm.get('workDayandTime') as FormArray; }
请检查一下。这是 json 中的表单值：i.stack.imgur.com/7m1Qb.jpg

标签： angular forms typescript formarray

【解决方案1】：

我解决了，

在 HTML 中：

<span *ngFor="let day of workDayandTime.controls;let i= index;">
  {{ day.controls.onduty.value }}
</span>

这是表单数组的结构： Structure

这很复杂：

【讨论】：

【解决方案2】：

只需使用 workDayandTime 而不是 workDayandTime.controls。它会起作用的：

    <form [formGroup]="employerForm">
          <span *ngFor="let day of workDayandTime;let i= index;">
            {{day.onduty}}
            <span *ngIf="day.onduty=='false'">{{getDays(i)}},&nbsp;</span>
          </span>
    </form>

【讨论】：

ERROR 错误：未捕获（在承诺中）：错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

【解决方案3】：

上面的代码对我有用。跟随其他例子。

 <div *ngFor="let rules of condition['controls'].filters['controls']; let conditionIndex = index" class="row">{{rules.controls.formId.value }}</div>

【讨论】：