Removing FormControl from formArray

Question

I have created my FormGroup as below

this.GSTNForm = this.formbuilder.group({
      gstRegistrationStatusId: new FormControl(''),
      reasonForNonApplicabilityofGST: new FormControl(''),
      isExemptGoods: new FormControl(false),
      goodServiceRemarks: new FormControl(''),
      gstandbankDetails: this.formbuilder.array([
        this.formbuilder.group({
          _id: new FormControl(''),
          sequenceNo: new FormControl(this.gstnSequenceValue),
          gstn: new FormControl(''),
          addressline1: new FormControl(''),
          addressLine2: new FormControl(''),
          stateCode: new FormControl(''),
          cityCode: new FormControl(''),
          countryCode: new FormControl(''),
          pinCode: new FormControl(''),
          accountHolderName: new FormControl(''),
          accountTypeId: new FormControl(''),
          bankName: new FormControl(''),
          branchName: new FormControl(''),
          bankCountryCode: new FormControl(''),
          accountNo: new FormControl(''),
          ifscCode: new FormControl(''),
          micrCode: new FormControl(''),
          swiftCode: new FormControl('')
        })
      ])
    });

I some how want to remove the _id formcontrol, since the controls are complicated I don't know how to remove. Please help.

Answer 1

The key here is to navigate your form structure. Once you get to the form group that _id is in, you can use removeControl('_id') to remove the control.

const arr: FormArray = this.GSTNForm.get('gstandbankDetails') as FormArray;
const grp: FormGroup = arr.get('0') as FormGroup;
grp.removeControl('_id');

I have created a step for each navigation, but you could wrap it up into one giant call if you wish.

My preference would be to store the nested form group as a property, then you can just call:

this.nestedGroup.removeControl('_id');

DEMO: https://stackblitz.com/edit/angular-vmtzaw