使用 FormArrayName 的反应形式 angular

Question

在我的表单中，我需要添加 phones，我看到在数据库中您正在保存一个字符串数组，其中包含我添加的 phone 数字，但是值返回的那一刻从数据库设置为表单，只显示第一个数组值。

我想以字符串格式显示包含 phone 个数的所有数组值。

component.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>

component.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('')); }

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

Answer 1

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

当您已经知道应该有多少个表单控件时，您必须为每个 phone 编号调用 addPhone 或在描述中创建表单，但您仍然需要创建尽可能多的表单控件作为数组中元素的数量。

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

使用 FormArrayName 的反应形式 angular

Reactive form angular using FormArrayName

html

typescript

angular

angular-reactive-forms