update a table in angular

Question

I'm trying to do an action after creating an event. Create a control form that has been selected in form1 several p, and update a PSelected table. I have two files, A.html and A.ts

A.html:

<mat-select placeholder="form1" [formControl]="product" (ngModelChange)="getP($event)" multiple> <mat-option *ngFor="let p of allProduct" [value]="p.pro_nom">{{p.pro_nom}}</mat-option>
</mat-select>

<mat-form-field *ngFor="let valeurControls of valeursControls">
   <input matInput maxLength="255" type="text [placeholder]="valeurControls.valeur.n [formControl]="valeurControls.formControl">
</mat-form-field>                                                         

A.ts:

import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { filter, takeUntil } from 'rxjs/operators';
import { Product, Candy } from 'src/app/models';
import { Service } from 'src/app/services';
import { Listener } from 'selenium-webdriver';

@Component({
    selector: 'ei',
    templateUrl: './A.component.html',
    styleUrls: ['./A.component.less'],
    encapsulation: ViewEncapsulation.None
})
export class AComponent extends FormFieldsContainer implements OnInit {

    @Output('change') inputChange = new EventEmitter();

    //var

    allProduct: Product[];
    Candy: Candy;

    // Form
    actionFormGroup: FormGroup;
    product: FormControl;
    event: Listener[]

    // P
    valeursControls: { valeur: candy, formControl: FormControl }[] = [];

    public pSelected: Array<any>;

    // Constructor
    constructor(private fb: FormBuilder) {
        super();
        this.Candy = this.Candy ? this.Candy : { name: null, type: null };
        this.pSelected = [];
        this.buildForm();
    }

    ngOnInit() {
      this.Service.getProduct()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(p => {
                this.allProduct = p;
            });
    }
    getP(event?: Event[]) {
        if (typeof event == 'undefined') {
            this.pSelected = [];
        } else {
            this.pSelected = event;
        }
        console.log(this.pSelected)
        return this.pSelected;
    }

    getFormGroup(): FormGroup {
        return this.actionFormGroup;
    }

    onSubmitSuccess<Boolean>(result: Boolean) {

    }

    private buildForm() {
        this.submitted = false;
        this.p= this.fb.control('', Validators.required);
        this.actionFormGroup = this.fb.group({
            product: this.product
        });

        // my array does not update, it remains empty
        this.pSelected .forEach(p => {
            const VarFormControl = this.fb.control(null);
            this.valeursControls.push({
                valeur: { name: p, type: this.Candy.type },
                formControl: VarFormControl 
            });
            this.actionFormGroup.addControl(p, VarFormControl );
        });
    }
    Actions() {
        this.submitted = true;
    }
}

in the function getP(), my table is updating, but when I use it in buildForm() it is empty yet it should have the same value

Answer 1

you are calling this.buildForm(); from the component constructor. The value of pSelected will be the declared one: public pSelected: Array;

You should rebuild valeursControls any time you select/unselect a value inside the mat-select component.

try:

getP(event?: Event[]) {
    this.valeursControls = [];
    if (typeof event == 'undefined') {
        this.pSelected = [];
    } else {
        this.pSelected = event;
        this.buildValeursControls();
    }
}

private buildValeursControls(){
    this.pSelected.forEach(p => {
        const VarFormControl = this.fb.control(null);
        this.valeursControls.push({
            valeur: { n: p, r: this.B.r },
            formControl: VarFormControl 
        });
        this.actionFormGroup.addControl(p, VarFormControl );
    });
}

private buildForm() {
    this.submitted = false;
    this.p= this.fb.control('', Validators.required);
    this.actionFormGroup = this.fb.group({
        p: this.p
    });
}