angular reactive forms remove formArray elements after save

Question

In angular 5 I have a form with user can add multiple records of charges which can save at once. after save need to remove those records and go back to initial state with one row. I have tried as following code it goes to initial state but the validation is firing when go back to that state.

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

  }

In the UI validation is done using following condition for each control.

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

>

But did you try reset() after saving form and removing additional rows? — jakubm
– jakubm, Commented Dec 13, 2018 at 7:04

Chellappan வ · Accepted Answer · 2018-12-13 09:00:00Z

2

Try this

saveForm(){

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

 });

edited Dec 13, 2018 at 9:00

answered Dec 13, 2018 at 7:07

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chellappan வ Over a year ago

try to add this also this.fastPostingForm.markAsPristine();

Chellappan வ Over a year ago

can you create stackbitz

Manoj Sanjeewa Over a year ago

*ngIf="!fastPostingForm.controls.Charges.controls[i].controls.room.valid && fastPostingForm.controls.Charges.controls[i].controls.room.touched" I have used this condition in UI.

Sachin Gupta · Accepted Answer · 2018-12-13 07:51:22Z

1

You don't need to create the group again. You can simply remove all the elements from the FormArray. Use :

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

then call the addCharge() to add the default first element.

edited Dec 13, 2018 at 7:51

answered Dec 13, 2018 at 7:12

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

10 Comments

Manoj Sanjeewa Over a year ago

it gives me a error. Cannot invoke an expression whose type lacks a call signature. Type 'AbstractControl' has no compatible call signatures.

Sachin Gupta Over a year ago

My bad, missed the charges controls. You need to get the Charges as a FormArray, then you can splice the controls like any other array.

Manoj Sanjeewa Over a year ago

but how to solve validation firing issue. after calling addcharge() function the input's validation is firing. need to go pack to the initial state.

Sachin Gupta Over a year ago

If the form is displayed on the UI, validators will be fired every time a control is rendered on UI.

Manoj Sanjeewa Over a year ago

but initial loading of the page does not firing any validation messages

|

Collectives™ on Stack Overflow

angular reactive forms remove formArray elements after save

2 Answers 2

3 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related