如何在反应式表单中重置一组 formControls？

Question

我有一个表，其中包含许多由 ngFor 循环生成的行。 当用户单击一行或一组行时，这些行将被推送到一个新数组中，并且可以一次编辑一个。我想添加允许用户将行重置为默认设置的重置功能。我遇到的问题是重置功能正在重置整个表格。如何将特定行传递给重置方法以仅重置该特定行？

下面是相关代码。 // HTML

<div
*ngIf="!!modal"
class="modal__mask">
<section
    *ngIf="!!modal"
    class="modal modal__large"
    [formGroup]="tableForm">
    <div class="modal__header modal__header--large">
        <h6>Edit Employee Details</h6>
        <div class='u-flex u-alignCenter'>
            <i
                class="icon icon--medium icon--pointer"
                (click)="previousSelectedRow()">
                arrow_left
            </i>
            <p *ngIf="selectedRows.length > 0">{{modalPage + 1}} of {{selectedRows.length}} employees</p>
            <i
                class="icon icon--medium icon--pointer"
                (click)="nextSelectedRow()">
                arrow_right
            </i>
        </div>
    </div>
    <section>
        <div
            class="u-flex u-wrap"
            *ngFor='let row of selectedRows; let i = index'>
            <div
                class="u-flex modal__body"
                style="width: 50%"
                *ngFor="let column of columns">
                <div
                    *ngIf="column.label"
                    class="input__wrapper"
                    [ngClass]="{'input__wrapper--inline': layout === 'horizontal'}">
                    <div>
                        <label
                            class="input__label">
                            <p class="t-bold t-data">{{column.label}}</p>
                        </label>
                        <div class="z-input__default">
                            <input
                                class="input u-maxX"
                                [attr.type]=""
                                [attr.placeholder]=""
                                [formControlName]="column.key"
                                [value]="row[column.key]">
                        </div>
                    </div>
                </div>
            </div>
           <section class="modal__footer u-fillRemaining">
                <div class="u-flex">
                    <button
                        class="button button--medium"
                        (click)="nextSelectedRow()">
                        <div class="button__content">
                            <i
                                class="icon icon--medium"
                                *ngIf="!!icon">
                                {{icon}}
                            </i>
                            <span>Skip</span>
                        </div>
                    </button>
                </div>
                <div class="u-flex">
                    <button
                        class="button button--low"
                        (click)="reset(row)">
                        <div class="button__content">
                            <i
                                class="icon icon--medium"
                                *ngIf="!!icon">
                                {{icon}}
                            </i>
                            <span>Reset</span>
                        </div>
                    </button>
                    <button class="button button--low">
                        <div class="button__content">
                            <i
                                class="icon icon--medium"
                                *ngIf="!!icon">
                                {{icon}}
                            </i>
                            <span>Save Changes</span>
                        </div>
                    </button>
                </div>
            </section>
        </div>
    </section>

</section>

// TS

ngOnInit() {
    if (!!this.rows) {
        this.tableForm = new FormGroup({});

        this.rows.forEach(row => {
            this.columns.forEach(column => {
                this.tableForm.addControl(column.key, new FormControl(row[column.key]));
            });
        })
    }
}

reset(row) {
    let resetRow = row;
    this.tableForm.reset(resetRow) // this resets the entire table

}

Answer 1

基本上现在你的控件一个接一个地运行，所以你不能仅仅区分哪些与特定行相关，你可以做的是将每一行的控件包装到 FormGroup 中并将这个 FormGroup 添加到父 FormArray所以该行的索引将是它的关键。然后您可以使用该索引找到所需行的 FormGroup 来重置它。

在 ngOnInit 方法中

this.tableForm = new FormArray([]);

this.rows.forEach((row, i) => {
    const rowGroup = new FormGroup({});

    this.columns.forEach(column => {
        this.rowGroup.addControl(column.key, new FormControl(row[column.key]));
    });
    this.tableForm.push(rowGroup);
})

在html模板中

...
<section
   *ngIf="!!modal"
   class="modal modal__large"
   [formArray]="tableForm">
...
<div
  class="u-flex u-wrap"
  *ngFor='let row of selectedRows; let i = index'
   [formGroupName]="i">
...
<button
    class="button button--low"
    (click)="reset(i)">
....

重置方法

reset(i) {
    this.tableForm.at(i).reset();
}

希望对您有所帮助。