CODEWITHSUNDEEP
angulartypescriptgoogle-cloud-firestoreangular-material
DCMATE
DCMATE

Reputation: 125

Multiple mat-chip-list in reactive forms with same source

I search to have two mat-chip-list inputs, but it seems impossible to directly push values into arrays, to be checked by reactive forms.

I precise the data is loaded from Firestore like this:

enter image description here

The structure of my form is :

this.editForm = this.fb.group({
  ...
  tabs: this.fb.array([
    this.fb.group({
      physicals: this.fb.array([])
      cognitives: this.fb.array([])
    });

I want to push chips into 2 differents arrays, but impossible to do that :

add(event: MatChipInputEvent, formIndex): void {
    const input = event.input;
    const value = event.value;
    if ((value || '').trim()) {
      this.$tabs.subscribe((tabs) => {
        tabs.forEach((tab) => {
          if (tab.physicals) {
            // Tried all of this
            this.effects.physicals.push({
              name: value.trim(),
              color: 'primary',
            });
            // this.editForm.get('tabs').get(formIndex).value.physicals.push({
            //   name: value.trim(),
            //   color: 'primary',
            // });
            // tab.physicals.push({ name: value.trim(), color: 'primary' });
          }
          if (tab.cognitives) {
            // same but for cognitives
          }
        });
      });
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }
  }

So when I input a new chip and press enter, the list isn't updated at all and for certain cases throw me a "TypeError: path.split is not a function" error.

Same if I transform value to a formControl then push it into a formArray.

Same if I push the value directly in a external array then pass it in the form.

An idea of what i'm doing wrong ?

It will be looking like this :

result

Stackblitz : https://stackblitz.com/edit/angular-eiydja

Thanks in advance for your help !

Upvotes: 0

Views: 1611

Answers (1)

yurzui
yurzui

Reputation: 214175

The error "TypeError: path.split is not a function" was caused by the fact that you passed number to AbstractControl.get method but it expected a string.

You can use shorted version:

this.editForm
      .get(["tabs", index, "physicals"])

Forked Stackblitz

Upvotes: 1

Related Questions