gpt4 book ai didi

javascript - Angular 2 : Can't add form group to form array in reactive Forms

转载 作者:数据小太阳 更新时间:2023-10-29 04:25:30 26 4
gpt4 key购买 nike

我正在构建动态表单并希望“即时”添加表单组。

这是我的代码,几乎可以工作:

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

export class CombinedComponent implements OnInit {

ltsForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
}

ngOnInit() {
this.ltsForm = this.initFormGroup();

// init products
for (let i = 0; i < 3; i++) { // add dynamically products
this.addProduct();
}

console.log(this.ltsForm); // Array 'prods' is empty
}

// initialize form group, but don't add products yet because they will be added dynamically later
initFormGroup() {
let group = this.formBuilder.group({
products: this.initProductGroup()
});

return group;
}

initProductGroup() {
let group = this.formBuilder.group(
{
//initialize empty formbuilder array
prods: this.formBuilder.array([])
}
);

return group;
}

initProducts() {
return this.formBuilder.group({
id: [''],
value: false, // checkbox value
});
}

addProduct() {
<FormArray>this.ltsForm.controls['products'].value.prods.push(this.initProducts());

console.log(this.ltsForm); // Array 'prods' contains 3 FormGroup elements
}
}

模板:

<form [formGroup]="ltsForm"
novalidate
(ngSubmit)="save(ltsForm)">

<div formGroupName="products">
<div formArrayName="prods">

<div *ngFor="let product of ltsForm.controls.products.value.prods.controls; let i = index">
<div [formGroupName]="i">
<input type="checkbox"
formControlName="value"
id="product_{{ i }}"
name="product_{{ i }}">
</div>
</div>

</div>
</div>

<button type="submit"
[disabled]="!ltsForm.valid">
Submit
</button>
</form>

在方法 addProduct() 中,我将整个 FormGroup 元素推送到“prods”数组。所以最后 ngOnInit() 中控制台的输出只包含一个空的“prods”数组,而 addProduct() 方法中控制台输出的数组有 3 个元素。看起来 this.ltsForm 丢失了它的引用并且没有更新。有什么想法吗?

UPD:刚发现如果我从模板中删除全部内容,我会得到充满数据的“产品”。

最佳答案

有很多小错误和复杂性,所以我削减了你的例子并重新构建它。 Angular 团队有一个 nested form array 的例子和 nested form group那很有帮助。这是过程(和 plnkr ):

  1. 有一个简单的小组工作:{ projects: '' }
  2. 得到了一个具有一组控件的工作:{ projects: ['a', 'b', 'c'] }。我跳过了 prods,这似乎是不必要的。

    <form [formGroup]="ltsForm" novalidate (ngSubmit)="save()">
    <div formArrayName="products">
    <div *ngFor="let p of products.controls; let i=index">
    <input [formControlName]="i">
    </div>
    </div>
    <button type="submit" [disabled]="!ltsForm.valid">
    Submit
    </button>
    </form>

    ...

    export class CombinedComponent implements OnInit {

    ltsForm: FormGroup;

    get products() { return this.ltsForm.get('products'); }

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
    this.ltsForm = this.formBuilder.group({
    products: this.formBuilder.array([])
    });

    for (let i = 0; i < 3; ++i) {
    this.addProduct();
    }
    }

    addProduct() {
    this.products.push(this.formBuilder.control(''));
    }

    save() {
    console.log(this.ltsForm.value);
    }
    }
  3. 最后一步用组替换数组中的控件:

    @Component({
    selector: 'combined-component',
    template: `
    <form [formGroup]="ltsForm" novalidate (ngSubmit)="save()">
    <div formArrayName="products">
    <div *ngFor="let p of products.controls; let i=index">
    <div [formGroupName]="i">
    <input formControlName="id">
    <input type="checkbox" formControlName="value">
    </div>
    </div>
    </div>
    <button type="submit" [disabled]="!ltsForm.valid">
    Submit
    </button>
    </form>
    `
    })
    export class CombinedComponent implements OnInit {

    ltsForm: FormGroup;

    get products() { return this.ltsForm.get('products'); }

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
    this.ltsForm = this.formBuilder.group({
    products: this.formBuilder.array([])
    });

    for (let i = 0; i < 3; ++i) {
    this.addProduct();
    }
    }

    addProduct() {
    this.products.push(this.formBuilder.group({
    id: '',
    value: false
    }));
    }

    save() {
    console.log(this.ltsForm.value);
    }
    }

关于javascript - Angular 2 : Can't add form group to form array in reactive Forms,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41517389/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com