Validating form-controls inside ngbAccordion

Question

In Angular I have an ngForm with some inputs inside it as usual, but I also have an ngbAccordion inside the form with multiple input fields inside different panels. When submitting the form, the only inputs that get validated are the ones outside the accordion and the ones inside the expanded accordion panel (if there is any panel expanded). I want all fields to be validated, including the ones inside collapsed accordion panels

My html looks like this:

<form #MyForm="ngForm">
  <div>...some input field</div>
  <div>...some other input field</div>
  <ngb-accordion #accordion>
    <ngb-panel id="1">
      <ng-template ngbPanelTitle> title1 </ng-template>
      <ng-template ngbPanelContent>
        <div>...some input field</div>
        <div>...some other input field</div>
      </ng-template>
    </ngb-panel>
    ...more panels with nested input fields
  </ngb-accordion>
</form>

But then in the component doing MyForm.valid only considers the two "outside" fields and the ones inside the currently expanded accordion panel

I've been trying to iterate over the panels on my "formValid" function and somehow access the fields from there but I'm not sure how to proceed

Answer 1

By default, ngb-accordion destroys the DOM for hidden panels and that's why fields inside hidden panels are not being validated. It is possible to avoid destroying DOM on hidden panels using [destroyOnHide]="false" in the ngb-accordion component