无法在 Angular 中访问 formArray 的值答案

【问题标题】：Not able to access value of formArray in Angular无法在 Angular 中访问 formArray 的值
【发布时间】：2020-08-29 06:00:00
【问题描述】：

我无法在我的 Angular 项目中使用反应式表单访问 formarray 值

我的回应是这样的：

{出现一次：“初始值” formArray: 数组[0]}

在表单数组中输入值并提交表单后，我仍然得到数组为 0

我正在分享我的代码，它存在于 slack-blitz 链接中 https://stackblitz.com/edit/angular-x6mwfj?file=src%2Fapp%2Fapp.component.ts

代码：

TS：

 inputArray: any = [];
myForm: FormGroup;
 constructor(private fb: FormBuilder) {}
    ngOnInit(): void {
        let newForm = this.fb.group({
            appearsOnce: ['InitialValue', [Validators.required, Validators.maxLength(25)]],
            formArray: this.fb.array([])
        });

        const arrayControl = <FormArray>newForm.controls['formArray'];
        this.inputArray.forEach(item => {
            let newGroup = this.fb.group({
                propertyOne: [''],
                propertyTwo: ['']
            });
            arrayControl.push(newGroup);
        });

        this.myForm = newForm;
    }
    addInput(): void {

        const arrayControl = <FormArray>this.myForm.controls['formArray'];
        let newGroup = this.fb.group({

           propertyOne: ['InitialValue'],
                propertyTwo: ['InitialValue']

        });
        arrayControl.push(newGroup);
    }
    delInput(index: number): void {
        const arrayControl = <FormArray>this.myForm.controls['formArray'];
        arrayControl.removeAt(index);
    }
    onSubmit(): void {
        console.log(this.myForm.value);

    }

html：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    <label>Appears Once:</label>
    <input type="text" formControlName="appearsOnce" />






    <div formArrayName="formArray">
        <div *ngFor="let control of myForm.controls['formArray'].controls; let i = index">
            <button type="button" (click)="delInput(i)">Delete</button>
            <!-- <my-form-sub-component [myForm]="myForm.controls.formArray.controls[i]"></my-form-sub-component> -->
            <div [formGroup]="newGroup">
    <label>Property One: </label>
    <input type="text" formControlName="propertyOne"/>

    <label >Property Two: </label>
    <input type="number" formControlName="propertyTwo"/>
</div>
        </div>
    </div>
    <button type="button" (click)="addInput()">Add + </button>
    <button type="submit" class='btn' [disabled]="!myForm.valid">Submit</button>
</form>

【问题讨论】：

标签： angular angular8 angular-reactive-forms angular-forms formarray

【解决方案1】：

FormArray 是基于索引的。所以你必须像这样将索引传递给 formGroupName 指令

component.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    <label>Appears Once:</label>
    <input type="text" formControlName="appearsOnce" />
    <div formArrayName="formArray">
        <div *ngFor="let control of myForm.get('formArray').controls; let i = index">
            <button type="button" (click)="delInput(i)">Delete</button>
            <div [formGroupName]="i">
                <label>Property One: </label>
                <input type="text" formControlName="propertyOne"/>

                <label >Property Two: </label>
                <input type="number" formControlName="propertyTwo"/>
</div>
            </div>
        </div>
        <button type="button" (click)="addInput()">Add + </button>
        <button type="submit" class='btn' [disabled]="!myForm.valid">Submit</button>
</form>

Forked Example

【讨论】：