I am trying to display a faqs list in mat-accordions in my project. I have a static array which I have integrated into a FormArray. When I interact the FormArray in my template I get no display and I get the error Cannot read properties of null (reading 'value'). Do you know why? Do you have a solution? My Work in Stackblitz: https://stackblitz.com/edit/angular-una717?file=app/expansion-overview-example.ts,app/expansion-overview-example.html

My Code:

// HTML
<form [formGroup]="faqsForm">
  <div formArrayName="faqsFormArray">
    <mat-accordion >
      <mat-expansion-panel
        
        *ngFor="let faq of faqsForm.get('faqsFormArray').controls; index as i"
        (opened)="panelOpenState = true"
        (closed)="panelOpenState = false"
      >
        <!-- Header -->
        <mat-expansion-panel-header >
          <!-- Question -->
          <mat-panel-title >
            <!-- Section-->
            <mat-panel-description >
              {{ faq.get('section').value }}
            </mat-panel-description>
            {{ faq.get('question').value }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <!-- Content -->
        <p >{{ faq.get('answer').value }}</p>
      </mat-expansion-panel>
    </mat-accordion>
  </div>
</form>

// TS
  // ********** DECLARATIONS **********//

  // Variables for the accordion
  public panelOpenState = false;

  // For the form
  public faqsForm: FormGroup;
  public faqsFormArray: FormArray;

  public displayFaqsItems = [
    {
      key: '1',
      section: 'Verwaltung',
      question: 'Test1',
      answer: 'dsdsddssddssd',
    },
    {
      key: '2',
      section: 'Absatz',
      question: 'Test2',
      answer: 'DSDSSDSDSDSDSDSDSD',
    },
    {
      key: '3',
      section: 'Beschaffung',
      question: 'Test3',
      answer: 'dghsghdsghsdghgsdhsdghsdghsdgsdghsdghsdgds',
    },
    {
      key: '4',
      section: 'Finanzen',
      question: 'Test4',
      answer: 'fdfdfdfdsssdsdfsdfsdf',
    },
  ];

  constructor(
    private formBuilder: FormBuilder) {}

  ngOnInit() {
    // To initialize forms
    this.initForm();

    // Call formRowsData
    this.displayFormElements(this.displayFaqsItems);
  }

  // Creation of the faqs form
  initForm() {
    // General
    this.faqsForm = this.formBuilder.group({
      faqsFormArray: this.formBuilder.array([]),
    });
  }

  /**
   * To add form structure in the faqs
   */
  public formStructure() {
    const formArray = this.faqsForm.get('faqsFormArray') as FormArray;
    const start =
      this.faqsFormArray && this.faqsFormArray !== null
        ? this.faqsFormArray.controls.length
        : 0;
    for (let i = start; i < start   1; i  ) {
      const rowData = {
        key: new FormControl(`new-${i}`),
        section: new FormControl(''),
        question: new FormControl(''),
        answer: new FormControl(''),
      };
      const createRow = this.formBuilder.group(rowData);
      formArray.push(createRow);
    }
    this.faqsFormArray = formArray;
  }

  /**
   * To show formElements
   * @param accordionRows any
   */
  public displayFormElements(accordionRows: any) {
    const formArray = this.faqsForm.get('faqsFormArray') as FormArray;
    const createRow = this.formBuilder.group(accordionRows);
    formArray.push(createRow);
    this.faqsFormArray = formArray;
  }

CodePudding user response：

Instead of creating formGroup for all array, you need to create FormGroup for individual object

Try this:

// Call formRowsData
this.displayFaqsItems.forEach((displayFaqsItem)=>{
  this.displayFormElements(displayFaqsItem);
})

Forked Example

CodePudding user response：

You're creating your FormArray incorrect. Try this.

public displayFormElements(accordionRows: any) {
  const formArray = this.faqsForm.get('faqsFormArray') as FormArray;
  accordionRows.forEach(element => {
    formArray.push(this.formBuilder.group({
      key: [element.key],
      section: [element.section],
      question: [element.question],
      answer: [element.answer]
    }));
  });
}