角度4的formArray内部的Formarray [英] Formarray inside formArray in angular 4

问题描述

我正在尝试在formarray内实现formarray，但是它不起作用，下面也尝试过，但是不起作用.

I am trying to implement formarray inside formarray but its not working, tried below too but doesn't work.

如何在何时获取FormArrayName FormArray嵌套在另一个FormArray中?

有人可以帮助我，在下面的代码中我在哪里做错了

could someone please help me where am i doing wrong in below code

HTML

<div [formGroup]="MainFormGroup" class="custom-auto-complete">
<mat-radio-group matInput formControlName="Applies">
<mat-radio-button *ngFor="let applie of applies" [value]="applie.id">{{applie.value}}</mat-radio-button>
</mat-radio-group>

    <div formArrayName="FormArrayOne">
    <div *ngFor="let mains of MainFormGroup.get('FormArrayOne')['controls']; let i=index">
    <div [formGroupName]="i">
    <mat-icon *ngIf="MainFormGroup.get('FormArrayOne').length > 1" (click)="removeMarket(i)">remove_circle</mat-icon>
    <mat-icon (click)="addOne()"> add_circle</mat-icon>
    <mat-form-field>
    <input matInput formControlName="OneField" value="">
    </mat-form-field>

            <div formArrayName="FormArrayTwo">
            <div *ngFor="let Market of MainFormGroup.get('FormArrayTwo')['controls']; let j=index" >
            <div [formGroupName]="j">            
            <mat-form-field class="formfieldsControl">
            <input matInput formControlName="Destination">
            </mat-form-field>
            </div>
            </div>
            </div>

    </div>
    </div>
    </div>    
</div>

TS

public ngOnInit() {
        this.MaintFormGroup = this._fb.group({
            Applies : '',
            FormArrayOne: this._fb.array([
                this.initArrayOne(),
            ])
        });
}

public initArrayOne() {
    return this._fb.group({
        OneField: '',
        FormArrayTwo : this._fb.array([
            this.initFormArrayTwo()
        ])
    });
}
public addMarket() {
    const control = <FormArray> this.MaintFormGroup.get('FormArrayOne');
    control.push(this.initArrayOne());
}
public removeMarket(i: number) {
    const control = <FormArray> this.MaintFormGroup.get('FormArrayOne');
    control.removeAt(i);
}

public initFormArrayTwo() {
    return this._fb.group({
        Destination : ''
    });
}
public addFormArrayTwo() {
    const Control = <FormArray> this.MaintFormGroup.get('FormArrayTwo');
    Control.push(this.initFormArrayTwo());
}
public removeFormArrayTwo(j: number) {
    const Control = <FormArray> this.MaintFormGroup.get('FormArrayTwo');
    Control.removeAt(j);
}

推荐答案

此链接 更能解决问题，但您可以看看我在stackblitz上创建的该项目，该项目具有深层嵌套的形式.

This link is more of a gist to the problem but you can take a look at this project i created on stackblitz which has deep nested forms .

这篇关于角度4的formArray内部的Formarray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！