Show textareas values in parent component as a list & not showing tabs on page load

userJ9sC 0
Viewed 28

I created a form with Angular Material, inside the form I have a mat-radio-group for radio buttons, and mat-tab-group For tabs, each one of this tabs have an input. I have two questions.

1 - The tab group doesn’t show when the page loads, I have to click in a radio button to see the tabs, I don’t know why this is happening.

2 - I am getting the values from the textareas and I am showing them in the parent component, When I write a new value in the text area, this one replace the previous value, but I need all the values from the different textareas.

ngfor angular-material tabs arrays angular
1 Answers

1st issue - not able to see tabs on reload/load

actually, as per the code, we are getting console errors, and because of that, we are not able to see tabs. it is breaking at the radio group itself.

console errors

console errors pic

Fix for the above issue - remove the formControlName="titleAction" for each radio button.

2nd issue - not getting all tabs data in a parent from child comp

so... here you are not sending all tabs data. that is the actual issue. I did a few changes in child and parent as per your expected result. sending array from child like below

submit() {
    this.updateDataEvent.emit({formdata:this.form.getRawValue(), tabs: this.tabs});  
  }

and changed code in the parent component while updating a few global variables

  updateData(selection: any): void {
    this.titleScreening =
      selection.formdata.titleAction === 'change'
        ? selection.formdata.titleText
        : 'Original Title';
    //Empty Inputs
    if (this.titleScreening === '') {
      this.titleScreening = 'Original Title';
    }
    this.divTag = this.divTag2 = ''
    selection.tabs.forEach((x) => {
      // this.name = x.fullName;
      var appendElement = '<li> <span> Name </span>' + x.name + '</li>';
      this.divTag = this.divTag + appendElement;

      // Show in parent component
      var appendElement2 = '<li> Value: ' + x.value + '</li>';
      this.divTag2 = this.divTag2 + appendElement2;
    });

    // selection.fullName === ''
    //   ? (this.divTag = '')
    //   : (this.divTag = appendElement);
  }

stackblitz

Exception0
Related