Formarray里面的formArray in angular 4

时间:2017-11-06 09:52:47

标签: angular typescript

我正在尝试在formarray中实现formarray,但它不起作用,在下面尝试但是不起作用。

How to get FormArrayName when the FormArray is nested in another FormArray?

有人可以帮助我,我在下面的代码中做错了吗

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);
}

1 个答案:

答案 0 :(得分:3)

This link更多的是问题的要点,但你可以看看我在stackblitz上创建的这个项目,它有深层嵌套的形式。