Javascript 如何在被动窗体中重置一组FormControl？

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

以下是相关代码。 //HTML

---

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

恩戈尼特法 在html模板中

---

希望这会有所帮助。

这或多或少是正确的，但HTML模板绑定需要重写才能正常工作。这里更好的选择是使用表单数组，而不是索引键控的表单组。@bryan60是的，你说得对，我会马上更新answer@AmirArbabian非常好的回答，非常感谢！我知道这个问题与没有嵌套的FormGroup有关，我只是不知道如何使用formArray来解决这个问题。@London804我很高兴它帮助了你@阿米拉巴比安，我有一个与此相关的问题，不知你能否回答？当我做这个时。tableForm=newformarray（[]）；我无法将其传递给子组件。请看我的问题。

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

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

}

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

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