Angular：ngbAccordion折叠面板内表单控件需全量验证

问题根源很明确：ngbAccordion 默认会把未展开面板的内容从 DOM 中销毁（destroyOnHide 默认值为 true），导致 Angular 表单无法识别这些不在 DOM 里的控件，自然不会对它们做验证。

解决步骤： #

1. 让所有面板内容保留在 DOM 中
   修改 ngb-accordion 的配置，把 destroyOnHide 设为 false，这样折叠面板只是隐藏内容，不会销毁 DOM 结构：

   <form #MyForm="ngForm">
     <div>...some input field</div>
     <div>...some other input field</div>
     <ngb-accordion #accordion [destroyOnHide]="false">
       <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>
       <!-- 更多面板 -->
     </ngb-accordion>
   </form>
   

2. 调整隐藏面板的视觉样式
   设置 destroyOnHide="false" 后，未展开面板的内容默认是用 display: none 隐藏的，如果你需要保持折叠的视觉效果（比如高度为0，不占布局空间），可以自定义 CSS 覆盖默认样式：

   /* 替换默认的 display:none 为高度折叠 */
   .collapse {
     display: block !important;
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease;
   }
   /* 展开时恢复高度 */
   .collapse.show {
     height: auto;
   }
   

3. 提交时强制触发全量验证
   即使 DOM 存在，未交互过的控件状态是 pristine（未触碰），默认不会触发验证。提交表单时，手动把所有控件标记为 touched，确保验证规则生效：

   import { Component, ViewChild } from '@angular/core';
   import { NgForm } from '@angular/forms';
   import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
   
   @Component({
     // 组件元数据
   })
   export class YourComponent {
     @ViewChild('MyForm') myForm: NgForm;
   
     onSubmit() {
       // 遍历所有表单控件，标记为已触碰
       Object.values(this.myForm.controls).forEach(control => {
         control.markAsTouched();
       });
   
       // 现在检查表单有效性就是全量验证了
       if (this.myForm.valid) {
         // 执行提交逻辑
         console.log('表单验证通过，提交数据');
       }
     }
   }
   

补充说明： #

• 如果面板内部嵌套了 formGroup 或 formArray，只要 DOM 存在，这些嵌套表单控件也会被纳入整体表单的验证体系。
• 这种方案不会影响 ngbAccordion 的折叠交互体验，只是改变了未展开面板的 DOM 处理方式。

内容的提问来源于stack exchange，提问作者Agustín Pérez Leiras