Angular 4 Reactive表单 - FormArrays的FormArray

时间:2017-12-22 22:59:01

标签: angular recursion angular-reactive-forms

我想问你关于反应形式的问题。 我正在尝试为表单对象创建视图。

在我的控制器中,我有这样的形式,因为我想让用户可以创建他想要的任意数量的输入。首先,我试图只创建没有包装组的数组,但我有错误,这是不可能的。所以我有组,在组内我有包含控件或子数组的数组。

我的控制器:

    createForm() {
    this.simpleGroup = this.fb.group({
        simpleArray: this.fb.array([
                this.fb.control('1a'),
                this.fb.control('1b'),
                this.fb.array([
                    this.fb.control('2a'),
                    this.fb.control('2b')
                ])
            ]
        )
    });
}

并查看:

<form [formGroup]="simpleGroup" novalidate>
<div formArrayName="simpleArray" class="well well-lg">
    <div *ngFor="let arrayElement of simpleArray.controls; let i=index">

        <div *ngIf="arrayElement.length == null">
            <input type="text" [formControlName]="i">
        </div>

        <div *ngIf="arrayElement.length != null">
            <!--TODO:-->
            <div formArrayName="?">
                <div *ngFor="let subArrayElement of ...; let i = index">
                    <input type="text">
                    <input type="text">
                </div>
            </div>
            <!--END TODO:-->
        </div>

    </div>
</div>

内部循环如果table的元素是控件,我首先显示两个div。如果它不是控件而是数组,则显示第二个。内部第二个div应该是两个输入控制该子数组但我有很多错误,形式数组必须有组作为父等。我不确定表单对象是否正确但我认为它不是一个解决方案来包装子数组另一组。

感谢您的帮助

0 个答案:

没有答案