Creating multiple dynamic inputs em angular

Question

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.

Sébastien · Accepted Answer · 2022-10-19 20:10:41Z

1

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 Oct 19, 2022 at 20:10

Sébastien

12.1k12 gold badges60 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jt_sobrinho Over a year ago

I did that but got this error aplicationerrorhandle .ts:43 ERROR Error: Cannot find control with path: 'concorrentes -> linkreferencia'

jt_sobrinho Over a year ago

It solves here, but thanks the problem was not to add other input and with what you ordered me to do too

Collectives™ on Stack Overflow

Creating multiple dynamic inputs em angular

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related