How to "walk" within two arrays at once with *ngFor?

Question

I basically have two arrays, and I would like to save their value at the same time *ngFor, I did just like to test something this way:

<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
        <mat-form-field appearance="standard" class="fullSize">
          <mat-label>Titulo</mat-label>
          <input [formControlName]="i" type="text" matInput id="field_{{i}}" autocomplete="off"
            placeholder="Titulo">
        </mat-form-field>
</div>

 <div formArrayName="alternativeFieldsValues" *ngFor="let value of alternativeFieldsValues.controls; let i = index">
          <mat-form-field appearance="standard" class="fullSize">
              <mat-label>Conteúdo</mat-label>
              <input [formControlName]="i" type="text" matInput id="value_{{i}}" autocomplete="off"
                placeholder="Conteúdo deste campo">
          </mat-form-field>
  </div>

and I have this function that puts these fields in HTML

 addAlternativeField() {
    this.alternativeFields.push(this.fbuilder.control(''));
    this.alternativeFieldsValues.push(this.fbuilder.control(''));
  }

the obvious problem is that the tuple TITLE/VALUE that was what I wanted will not be correct, in the first execution would look something like this:

But when calling this function again, the result will be this:

I would like to know how to maintain the desired format (TITLE/CONTENT) without this problem, since I did not find a way to handle the vectors in the same *ngFor

Seen @Ezar’s comment I did something like this:

<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
        <div [formGroupName]="i">
          <mat-form-field appearance="standard" class="fullSize">
            <mat-label>Titulo</mat-label>
            <input formControlName="alternativeFields" type="text" matInput autocomplete="off"
              placeholder="Titulo">
          </mat-form-field>
          <mat-form-field appearance="standard" class="fullSize">
            <mat-label>Conteúdo</mat-label>
            <input formControlName="alternativeFieldsValues" type="text" matInput autocomplete="off"
              placeholder="Conteúdo deste campo">
          </mat-form-field>
        </div>
      </div>

But I have the following error on the console:

ERROR Error: Cannot find control with path: 'alternativeFields -> 0 -> alternativeFields'
    at _throwError (forms.js:2144)
    at setUpControl (forms.js:2052)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
    at checkAndUpdateDirectiveInline (core.js:22095)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)

Apparently he says it’s not set in the form, which is actually:

this.form = this.fbuilder.group({
      index: [''],
      id: [''],
      name: ['', Validators.required],
      value: ['', Validators.required],
      title: ['', Validators.required],
      description: [''],
      alternativeFields: this.fbuilder.array([]),
      alternativeFieldsValues: this.fbuilder.array([])
    });

Any hint?