Angular 添加-动态删除和重置字段

我正在为添加、删除和重置字段制作一个动态表单，在添加和删除字段时，我的功能工作正常，但在单击重置时，它将重置整个表单，而不是重置特定的输入组

以下是我的工作： App.component.html:

<div class="container">
  <div class="row">
    <form novalidate [formGroup]="FormGroup">
      <div class="row">
        <div class="col-xs-12 form-group">
          <div style="margin-top:0px" formGroupName="itemRows">
              <div class="row panel-heading text-bold" style="text-align: left; margin-top: 0px; margin-left: 10px;">
                  Dynamic Row Add - Form Details
              </div>
              <ng-container *ngIf='FormGroup.controls.itemRows!=null'>
                <div class="" *ngFor="let itemRow of FormGroup.controls.itemRows.controls; let i=index" [formGroupName]='i'>
                    <div class="row">
                      <div class="col-md-2 form-group">
                        <input type="text"  placeholder="Name" formControlName="Name">
                      </div>
                      <div class="col-md-2 form-group">
                          <input type="text"  placeholder="Roll No." formControlName="RollNo">
                      </div>
                      <div class="col-md-2 form-group">
                          <input type="text"  placeholder="Class" formControlName="Class">
                      </div>
                      <div class="col-md-2 form-group">
                          <input type="text"  placeholder="Mobile No" formControlName="MobileNo">
                      </div>
                      <div class="col-md-2 form-group">
                          <button type="button" (click)="addRows()" [disabled]="FormGroup.invalid" class="btn btn-danger" style="margin-right:10px;">+</button>
                          <button (click)="deletRow(i)" class="btn btn-danger" style="margin-right:10px;">x</button>
                          <button (click)="resetField()" class="btn btn-danger">Reset</button>
                      </div> 
                    </div>
                </div>
              </ng-container>
              <!--<button type="button" (click)="addRows()" [disabled]="FormGroup.invalid" class="btn btn-danger">Add Rows</button>-->
          </div>
        </div>
      </div>
    </form>
 </div>
</div>

动态行添加-表单详细信息
+
x
重置

应用程序组件.ts

import { Component, ɵConsole } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { FormGroup, FormControl, FormBuilder, NgForm, Validators, FormArray } from '@angular/forms';
import { formsignup } from './formsignup';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'angular8Projects';

    FormGroup:FormGroup;
    TotalRow:number;

constructor(private _fb:FormBuilder){}

ngOnInit():void {
this.FormGroup = this._fb.group({
  itemRows: this._fb.array([this.InitItemRow()]),
})
}

InitItemRow(){
return this._fb.group({
  Name:[''],
  RollNo:[''],
  Class:[''],
  MobileNo:['']
})

}

resetField(){
  const control =<FormArray>this.FormGroup.controls['itemRows'];
  this.FormGroup.reset()
}

addRows(){
  const control = <FormArray>this.FormGroup.controls['itemRows'];
  control.push(this.InitItemRow())
}

deletRow(index: number){
  const control = <FormArray>this.FormGroup.controls['itemRows'];
  if (control != null){
    this.TotalRow = control.value.length;
  }
  if (this.TotalRow > 1 ){
    control.removeAt(index);
  }else {
    alert ('one recorder is mandatory');
    return false;
  }
}
}

从'@angular/core'导入{Component，ɵConsole}；
从'@angular/common'导入{registerLocaleData}；
从'@angular/forms'导入{FormGroup，FormControl，FormBuilder，NgForm，Validators，FormArray}；
从“/formsignup”导入{formsignup}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘Angular8项目’；
FormGroup:FormGroup；
TotalRow：数字；
构造函数（私有_fb:FormBuilder）{}
ngOnInit（）：void{
this.FormGroup=this.\u fb.group({
itemRows:this.\u fb.array（[this.InitItemRow（）]），
})
}
InitItemRow（）{
将此返回。\u fb.group({
姓名：['']，
罗尔诺：['']，
类别：['']，
美孚诺：['']
})
}
resetField（）{
const control=this.FormGroup.controls['itemRows']；
this.FormGroup.reset（）
}
addRows（）{
const control=this.FormGroup.controls['itemRows']；
control.push（this.InitItemRow（））
}
删除（索引：编号）{
const control=this.FormGroup.controls['itemRows']；
if（控件！=null）{
this.TotalRow=control.value.length；
}
如果（this.TotalRow>1）{
控制。移除（索引）；
}否则{
警报（“必须有一个记录器”）；
返回false；
}
}
}

---

感谢您的早日回复。

要明确@TheNsn666的评论：

在模板中，您需要：

(click)="resetField(itemRow)"

在ts代码中：

resetField(group: FormGroup){
  group.reset()
}

---

另外，我建议使用getter简化模板和ts代码：

get itemRowsArray {
    return this.FormGroup.controls.itemRows as FormArray
}

---

您正在重置

itemrrows

，因此它正在重置所有行，可能尝试重置

itemrrow

，并通过

（单击）=“resetField（itemrrow）”

发送它--只是不太清楚您尝试执行的操作。