Assign selected value to formarray

  angular, javascript, typescript

I’m having this problem that I can’t assign the selected value to the formarray field. I’m using ng-autocomplete, when I select the value and i make a console.log of the form group this appear as if I selectec something and store in the respective field, but when I make a submit, I make other console.log and is empty!

this is my HTML

<fieldset formArrayName="material_guid" class="mt-4">

  <fieldset name="quantites" *ngFor="let quantity of quantities.controls; let i = index" [formGroupName]="i">

    <p>Material {{ i + 1 }}</p>

    <ng-autocomplete [data]="dataMaterial" [searchKeyword]="keywordMaterial" (selected)='selectEventMaterialArray($event,i)' [itemTemplate]="itemTemplate" [notFoundTemplate]="notFoundTemplate" class="mb-4" placeholder="Selecciona un material" >
    </ng-autocomplete>

    <ng-template #itemTemplate let-item>
      <a [innerHTML]="item.nombre"></a>
    </ng-template>

    <ng-template #notFoundTemplate let-notFound>
      <div [innerHTML]="notFound"></div>
    </ng-template>

    <input type="number" min="1" max="3" class="form-control mb-4 mt-4" placeholder="Minimo" formControlName="minimo">

    <input type="number" min="1" max="3" class="form-control mb-4" placeholder="Maximo" formControlName="maximo">

    <button (click)="removeQuantity(i)" class="btn btn-danger">Quitar material</button>

  </fieldset>
</fieldset>

here is where i detect when the user make the select

selectEventMaterialArray(item, index) {
    this.quantities.controls[index].value.material = item.nombre
}

and here is my form group and the creation of my formarray

kanbanForm = this.formBuilder.group({
    kanban_nombre: ['', Validators.required],
    ubicacion: ['', Validators.required],
    ruta_guid: ['', Validators.required],
    kanban_guid: ['', Validators.required],
    material_guid: this.formBuilder.array([]),
    active: ['Y'],
})

getNewId() {
    this.currentStepId += 1;
    return this.currentStepId;
}

get newQuantity(): FormGroup {
    return this.formBuilder.group({
        id: [this.getNewId()],
        material: [''],
        minimo: ['', Validators.required],
        maximo: ['', Validators.required],
    })
}

get quantities() : FormArray {
    return this.kanbanForm.get("material_guid") as FormArray
}

addQuantity() {
    this.quantities.push(this.newQuantity);
    console.log(this.quantities.controls)
}

I don’t know what is wrong, hope someone can helpme

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.