Question

在角度5中，我有一个带有用户的表格，可以添加多个费用记录，这些记录可以一次保存。保存后，需要删除这些记录并返回到一行的初始状态。我已经尝试按照以下代码将其设置为初始状态，但是当返回该状态时会触发验证。

ngOnInit() {
    this.fastPostingForm = this.fb.group({
      Charges: this.fb.array([
        this.initCharge()
      ])
    });
}

initCharge() {
    return this.fb.group({
      room: ['', Validators.required],
      transactionCode: ['', Validators.required],
      amount: ['', Validators.required],
      quantity: [1, [Validators.required, Validators.min(1), Validators.max(9999)]],
      window: ['', Validators.required],
      reservationId: [''],
      rsv:[{}]
    });
  }

  addCharge() {
    const control = <FormArray>this.fastPostingForm.controls['Charges'];
    control.push(this.initCharge());
    console.log(control.length);
  }

 saveForm(){
        //save process

        //clear form and remove form array elements

        this.fastPostingForm = this.fb.group({
      Charges: this.fb.array([
        this.initCharge()
      ])
    });

  }

在UI中，对每个控件使用以下条件进行验证。

 <mat-error *ngIf="!fastPostingForm.controls.Charges.controls[i].controls.room.valid && fastPostingForm.controls.Charges.controls[i].controls.room.touched">message
</mat-error

>

Answer 1

尝试一下

saveForm(){

 this.fastPostingForm = this.fb.group({
      Charges: this.fb.array([
        this.initCharge()
 ])
 this.fastPostingForm.markAsUntouched();
 this.fastPostingForm.markAsPristine();
 this.fastPostingForm.updateValueAndValidity();

 });

Answer 2

您无需再次创建组。您可以简单地从FormArray中删除所有元素。使用：

(<FormArray>this.fastPostingForm.controls.Charges).controls.splice(0, (<FormArray>this.fastPostingForm.controls.Charges).controls.length);

然后调用addCharge()添加默认的第一个元素。

角反应形式保存后删除formArray元素

2 个答案: