时间戳

首页 > 解决方案 > 使用 FormArrayName 的反应形式角度

html - 使用 FormArrayName 的反应形式角度

问题描述

在我的表单中我需要添加电话，我已经看到在数据库中您正在使用我添加的电话号码保存一个字符串数组，但是从数据库返回的值设置为表单的那一刻，只有第一个数组值显示。

我想以字符串格式显示所有包含电话数量的数组值。

组件.html：

                        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start">
                            <div formArrayName="phones" fxFlex="30">
                                <div *ngFor="let phone of phones.controls; index as i">
                                    <mat-form-field>
                                        <input matInput [formControlName]="i" placeholder="Phone Number">
                                    </mat-form-field>
                                </div>
                            </div>
                            <div fxFlex="30">
                                <button mat-raised-button class="blue" (click)="addPhone()">Add</button>
                            </div>
                        </div>

组件.ts：

    this.myForm = this._formBuilder.group({
        phones: new FormArray([new FormControl('')]),
    });

    this.values$
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((values) => {
            // values = {phones: ['999999', '88888', '77777']}
            if (values) {
                this.myForm.patchValue(values, { emitEvent: false });
            }
        });

     get phones(): FormArray { return this.myForm.get('phones') as FormArray; }
     addPhone(): void { this.phones.push(new FormControl('')); }

即使在数组中返回多个值也只会在我的表单上显示第一个数组值，我做错了什么？

标签： htmlangulartypescriptangular-reactive-forms

解决方案

patchValue不会为您创建任何表单控件，因此当您调用 patchValue 时，它​​只会设置表单数组中第一个表单控件的值，因为您只创建了一个。

You have to call addPhone for each phone number or create form inside the describe when you already know how many form controls there should be, but you still need to create as many form controls as number of elements in your array.

this.myForm = this._formBuilder.group({
    phones: new FormArray(),
});

this.values$
    .pipe(takeUntil(this._unsubscribeAll))
    .subscribe((values) => {
        if (values && values.phones) {
            phones.forEach(phone => this.addPhone(phone));
        }
    });

 get phones(): FormArray { return this.myForm.get('phones') as FormArray; }
 addPhone(phone = ''): void { this.phones.push(new FormControl(phone)); }

推荐阅读