Question

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

这是我的工作： 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>

app.component.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;
  }
}
}

您的早期答复表示赞赏。

Answer 1

要明确显示@ TheNsn666的评论：

在您想要的模板中：

(click)="resetField(itemRow)"

在您的ts代码中：

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

此外，我建议使用吸气剂来简化模板和ts代码：

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

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

1 个答案: