Form builder with non-angular array

I need to create a form that dynamically increments three fields at the click of a button.

I looked at the angular site but it only shows how it does with a field.

I tried something like:

    <div formArrayName="variacoes">
      <div *ngFor="let variacao of variacoes.controls; let i=index">
        <label for="i">
          Nome Variação:
          <input [formControlName]="i" type="text" id="i" class="form-control">
        </label>

        <label for="i">
          Valor:
          <input [formControlName]="i" type="text" id="i" class="form-control">
        </label>

        <label for="i">
          SKU
          <input [formControlName]="i" type="text" id="i" class="form-control">
        </label>

      </div>
    </div>

productoForm = this.fb.group ({     Variations: this.fb.array ([       this.fb.control (''),     (I.e.   });

My functions:

get variacoes() {
    return this.produtoForm.get('variacoes') as FormArray;
  }

  addVariacao() {
    this.variacoes.push(this.fb.control(''));
  }

The idea would be that my form had an object called variations that inside it has arrays with key description, value and sku.

@ Update:

You are not adding new fields as expected, you are updating existing fields:

      <div class="col-12 col-md-3">
        <button (click)="addVariacao()" type="button" class="btn btn-primary waves-effect"><i class="fa fa-plus-square create-icon"
            aria-hidden="true"></i>Adicionar variação</button>
      </div>

      <form [formGroup]="categoriaForm">
        <ng-container *ngFor="let item of variacoes.controls; let i = index;">
          <tr class="d-flex" [formGroup]="item">
            <td class="col-1 primary-color">{{i}}&nbsp;&nbsp;&nbsp; descricao</td>
            <td class="col-3"><input type="text" class="form-control" formControlName="descricao"></td>
              <td class="col-1 primary-color">{{i}}&nbsp;&nbsp;&nbsp; valor</td>
            <td class="col-3"><input type="text" class="form-control" formControlName="valor"></td>
            <td class="col-3"><input type="text" class="form-control" formControlName="sku"></td>
            <td class="col-1 primary-color">{{i}}&nbsp;&nbsp;&nbsp; Sku</td>
          </tr>
        </ng-container>
      </form>

  ngOnInit() {
    this.categoriaForm = this.fb.group({

    variacoes: this.fb.array([this.createFormGroup()])

    });

  get variacoes(): FormArray {
    return this.categoriaForm.get('variacoes') as FormArray;
  }

  addVariacao(){
    this.categoriaForm = this.fb.group({
      variacoes: this.fb.array([this.createFormGroup()])
    });;
  }

  createFormGroup() {
    return this.fb.group({
      descricao: [''],
      valor: [''],
      sku: ['']
    });
  }