Creating multiple dynamic inputs em angular

Issue

I'm trying to create an array with a dynamic input object group.

Follow my HTML:

<div class="field col-12 md:col-11" formArrayName="concorrentes">
            <label for="">Link referência </label>
            <div class="form-group" *ngFor="let item of concorrentesControl; let i = index" [formGroupName]="i">
                <input class="form-control back_imput p-inputtextarea p-inputtext p-component p-element"
                    [formControlName]="linkreferencia">
            </div>
</div>

Follow my component:

get concorrentesControl() {
    // return this.formulario.get('concorrentes') as FormArray;
    return (<FormArray>this.formulario.get('concorrentes')).controls;
}

follow my form:

this.formulario = this.formBuilder.group({
        codigo: [null, [Validators.required]],
        titulo: [null, [Validators.required]],
        descricaoLonga: [null],
        peso: [null],
        comprimento: [null],
        largura: [null],
        altura: [null],
        ean: [null],
        valorcusto: [null],
        valorcustodolar: [null],
        quantidadeideal: [null],
        concorrentes: new FormArray([this.formBuilder.group({
            linkreferencia: ['']
            // fornecedor: [null],
            // precofornecedor: [null]
        })]),
        tabelafrete: new FormArray([])

    })

Follow to add:

public addNewRastreio() {
    const controlRastreio = new FormControl(null, [Validators.required]);
    (<FormArray>this.formulario.get('concorrentes')).push(controlRastreio)

}

error follows:

I really appreciate if anyone can help me.

Solution

linkreferencia is just the name of a control, you should remove the brackets around formControlName:

<input class="form-control back_imput p-inputtextarea p-inputtext p-component p-element"
    formControlName="linkreferencia">

Answered By - Sébastien