FormArray with nested FormGroups. How to access the nested form group controls?

this.formBuilder.array() method only accepts a parameter which is an array. You can't provide an object to it.

Approach 1: With this.formBuilder.array([])

1. Modify your properties structure to an array.
2. You can work with a loop to add the number of FormGroup that you need in the properties FormArray. And you should consider to implement a function to generate the single property FormGroup. This aims to reduce the code redundancy.

ngOnInit() {
  // Form with Form Array
  this.form = this.formBuilder.group({
    //---a couple controls---
    properties: this.formBuilder.array([]),
  });

  for (let i = 0; i < 3; i++)
    this.properties.push(this.createPropertyFormGroup());
}

createPropertyFormGroup() {
  return this.formBuilder.group({
    label: new UntypedFormControl(),
    value: new UntypedFormControl(),
  });
}

<form [formGroup]="form">
  <div formArrayName="properties">
    <ng-container
      *ngFor="let propertiesForm of properties.controls; let i = index"
    >
      <div [formGroupName]="i">
        <label>Label: </label>
        <input formControlName="label" />
        <br />

        <label>Value: </label>
        <input formControlName="value" />
      </div>
      <hr />
    </ng-container>
  </div>
</form>

Approach 2: With this.formBuilder.group({})

1. In HTML, you need the KeyValuePipe to iterate the properties FormGroup object and generate each FormGroup.

this.form = this.formBuilder.group({
  //---a couple controls---
  properties: this.formBuilder.group({
    first: this.createPropertyFormGroup(),
    second: this.createPropertyFormGroup(),
    third: this.createPropertyFormGroup(),
  }),
});

get propertiesFormGroup() {
  return this.form.controls['properties'] as FormGroup;
}

<form [formGroup]="form">
  <div formGroupName="properties">
    <ng-container
      *ngFor="let propertiesForm of propertiesFormGroup.controls | keyvalue;"
    >
      <div [formGroupName]="propertiesForm.key">
        <label>Label: </label>
        <input formControlName="label" />
        <br />

        <label>Value: </label>
        <input formControlName="value" />
      </div>
      <hr />
    </ng-container>
  </div>
</form>

Demo @ StackBlitz