标签: formarray

我正在尝试以 angular 5 反应形式捕获 FormArray 控件的 valueChanges 事件。我有正常的表单组 valueChanges 事件和相同的工作正常但不适用于 formArray 控件。

我已将我的表单组定义为 -

this.ApplicationForm = this.fb.group({
  ApplicationPenalties: this.fb.array([this.preparePenaltyDetails()])
});

并初始化表单数组如下 -

preparePenaltyDetails(): FormGroup {
    return this.fb.group({
      Id: '',
      ApplicationId: '',
      RevisionNo: '',
      PenaltyMwh: ''
    });
  }

当我从我的 api 获取数据时，我将控件设置为 -

this.ApplicationForm.setControl('ApplicationPenalties', this.fb.array(this.application.ApplicationPenalties
              .map(x => this.fb.group(x)) || []));

我的 html 模板如下 -

<div formArrayName="ApplicationPenalties" *ngFor="let penalty of ApplicationPenalties.controls; let i=index">
                    <div [formGroupName]="i">
                      <div class="row pocCharges">
                        <div class="col-md-6">
                          <div class="form-group">
                            <h4 class="d-sm-block">Revision Number</h4>
                            <div class="input-group">
                              <input class="form-control form-control-sm" formControlName="RevisionNo" type="text">
                              <span …

我试图建立一个Angular Reactive表单，其中一个帐户可以添加许多学生。

该表格似乎有效。当您点击添加学生时，它会创建一个新学生，但您会在控制台上看到提示

错误错误：找不到路径为'studentsArray-> 1-> firstName的控件

以此类推。

app.component.html

<form [formGroup]="accountForm">
<div>
    <input formControlName="firstName" placeholder="First name">
</div>
<div>
    <input formControlName="lastName" placeholder="Last name">
</div>
<div>
    <input formControlName="phone" placeholder="Phone">
</div>
<div>
    <input formControlName="email" placeholder="Email">
</div>
<button (click)="addStudent()" *ngIf="!showStudentForm">Add Student</button>
<div formArrayName="studentsArray">
    <div *ngFor="let student of studentsArray.controls; let i = index" [formGroupName]="i">
        <input formControlName="firstName" placeholder="First Name">
        <input formControlName="lastName" placeholder="Last Name">
        <input formControlName="dob" placeholder="Date of Birth">
    </div>
</div>

app.component.ts

import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, FormBuilder } …

再会。

我寻找了解决方案，即使有一个与我所问的类似的问题，我相信这个问题更独特一些，而不是重复。

这是我的 html 表单：

<div class="form-group col-md-6" formGroupName="schema">
  <div formArrayName="currencies">
    <input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
  </div>
</div>

这是我的 ts formBuilder。

this.createPromo = this.fb.group({
      type: ['promotion'],
      name: ['', Validators.required],
      description: ['', Validators.required],
      enabled: ['', Validators.required],
      promotion_type: ['', Validators.required],
      start: ['', Validators.required],
      end: ['', Validators.required],
      schema: this.fb.group({
        currencies: this.fb.array([
          this.fb.group({
            percentage: '',
            currency: 'ZAR'
          })
        ])
      }),
    });

所以我希望我的表单作为分组数组提交。然而，控制台中的错误如下Cannot find control with path: 'schema -> currencies -> percentage'，因此percentage即使我输入了一个数字，我也无法将我的表单提交为空。

In the other examples at StackOverflow there are many questions about using FormGroups in FormArrays. But my question is the opposite.

FormArrays have a push method, that makes many things possible. FormGroups have indeed an addControl method for adding simple FormControls. Afaik FormGroups do not have addFormArray or addFormGroup method. Therefore I need your help.

Following situation:

this.myForm = this.fb.group({
  id: this.fb.control([this.book.id]),
  // or short form `id: [this.book.id],`
});

Adding a simple control at a later point in time is …

Angular中是否有任何内置功能，所以我可以说：

remove all FormArray elements except at index 2

也许像其他库中的“ RemoveRange”之类的东西？

我想用 FormArray 创建一个可编辑的表格。

为此，我有results在表中呈现的属性。

用 FormArray 数据初始化它的正确方法是什么？

results: Array;
tableForm: FormGroup;

ngOnInit(private fb: FormBuilder) {
  this.tableForm = this.fb.group({
    arrayForm: this.fb.array([])
  });
}

FormGroup我的代码中有多个 dynamic 。

此外，某些FormGroups 具有添加多个FormGroups/ FormControls 的功能。

因此，在FormGroup动态创建时，我已经使用FormBuilder.group()了多个组，但我想为其创建一个数据数组FormControl。

如何FormControl为这个数据对象数组创建动态？

我试图用反应形式来做一些事情，但很难实现我认为简单的事情。

我想循环元素并将它们显示为表单控件。

我目前有：

@Component({
  selector: 'app-reactive-form-test',
  styleUrls: ['./reactive-form-test.component.scss'],
  template: `
    <form [formGroup]="questionForm">
      <ng-container formArrayName="questions" *ngFor="let question of questionForm.controls; let i = index">
<input type="text" formControlName="i">
</ng-container>
    </form>
  `
})
export class ReactiveFormTestComponent implements OnInit {
  questionForm: FormGroup;

  questions: ScheduledQuestionInterface[];

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.questionForm = this.fb.group({
      questions: this.fb.array([])
    });
    this.questions = [];
    this.questions.push(new ScheduledQuestion(1, 1, 1, 1));
    this.questions.push(new ScheduledQuestion(2, 3, 1, 2));
    this.questions.push(new ScheduledQuestion(3, 4, 1, 3));
    this.questions.forEach(value => {
      const control = this.questionForm.get('questions') …

我有一个表单数组，它是在从初始值为 false 的服务获取数据后动态设置的。

constructor(){
    this.form = this.fb.group({
        //...other controls...
        addOns: fb.array([])
    })
}
ngOnInit(){
    this.addonsService.getAll()
    .subscribe(result =>  {
      this.addOns = result;
      for(let addOn in this.addOns) {
        this.form.get('addOns').push(new FormControl(false));
      }
    });
}

然后我需要根据另一组值设置数组中的值。我努力了

var formArray = this.form.get('addOns') as FormArray;

然后循环过去，但这不起作用

formArray.controls.forEach(c => {
    c.setValue(true)
})

我也尝试按索引调用，但这返回未定义

formArray.controls[0].setValue(true);

如果我 console.log() formArray 我会得到预期数量的表单控件。

动态构建后如何设置 formArray 的值？

我正在处理一种复杂的角度形式，我需要一些帮助。让我详细解释一下我的情况。

我有一个像这样的 formArray ：

let slides = new FormArray([]);
slides.push(getNewSlide())
slides.push(getNewSlide())
slides.push(getNewSlide())
slides.push(getNewSlide())

function getNewSlide() {
  return new FormGroup({
    name: new FormControl("", [Validators.required]),
    image: new FormControl("", [Validators.required])
  })
}

上面的表格将如下所示：

slides = [
  { name: "ram", image: "a.png" },
  { name: "shyam", image: "b.png" },
  { name: "", image: "c.png" },             <== here is error. name is required so index should be 2
  { name: "ghanshyam", image: "d.png" },
]

我想从中找到包含任何错误的表单索引FormArray，但我不知道该怎么做。一件重要的事情是，这种形式可以嵌套。就像一个FormGroup可以包含另一个FormGroup或FormArray

任何人都知道深度扫描整个表格并找到第一个错误位置的索引（表格索引），然后请在这里回答。我会欣赏你的想法。

谢谢。