Angular 8动态复选框提交NgForm返回空值问题求助

看起来你遇到的问题是异步加载的动态复选框在提交NgForm时没有返回值，我帮你分析几个最可能的原因，以及对应的解决办法：

最可能的原因：缺少isMandatory属性初始化 #

从你的代码来看，你把接口返回的checkBoxes直接赋值给了additionalCoverArray，但接口返回的数据里大概率没有isMandatory这个字段——而你在模板里用[(ngModel)]="objCheckbox.isMandatory"做双向绑定。Angular的模板驱动表单需要绑定的属性存在，否则无法追踪值的变化，自然也就不会把这些复选框的状态纳入表单提交值中。

解决办法：初始化每个复选框的isMandatory属性 #

修改你的GetQueryAdditionalCovers方法，为每个从接口返回的对象添加isMandatory属性并设置默认值（比如false表示默认未选中）：

GetQueryAdditionalCovers() {
  this._getCheckboxvalueService.getCheckBoxValues("GetAdditionalCovers").then(result => {
    this.checkBoxes = result;
    // 为每个复选框对象初始化isMandatory属性
    this.additionalCoverArray = this.checkBoxes.map(item => ({
      ...item,
      isMandatory: false
    }));
    console.log(this.additionalCoverArray);
  });
}

其他可能的原因及解决办法 #

1. 动态控件未被NgForm正确注册 #

虽然NgForm通常能识别NgFor生成的动态控件，但如果异步数据加载完成后表单没有更新，可以尝试强制触发变更检测，让NgForm重新扫描表单控件：

首先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

然后在数据加载完成后调用detectChanges()：

GetQueryAdditionalCovers() {
  this._getCheckboxvalueService.getCheckBoxValues("GetAdditionalCovers").then(result => {
    this.checkBoxes = result;
    this.additionalCoverArray = this.checkBoxes.map(item => ({
      ...item,
      isMandatory: false
    }));
    this.cdr.detectChanges(); // 强制触发变更检测
    console.log(this.additionalCoverArray);
  });
}

2. 动态name属性存在无效字符 #

如果objCheckbox.displayValue包含空格、标点等特殊字符，会导致表单控件的name属性无效，NgForm无法识别这些控件。你可以把特殊字符替换成下划线：

<input type="checkbox" 
       [(ngModel)]="objCheckbox.isMandatory" 
       id="{{objCheckbox.displayValue}}" 
       name="{{objCheckbox.displayValue.replace(/\s+/g, '_')}}" 
       value="{{objCheckbox.displayValue}}" 
       (change)="toggleVisibility($event)">

额外推荐：切换到响应式表单 #

模板驱动表单在处理动态控件时灵活性有限，如果你经常需要处理这类动态表单场景，推荐使用Angular的响应式表单（FormGroup + FormArray），它能更精准地控制表单状态和值，避免模板驱动表单的一些隐性问题。示例代码如下：

TypeScript部分 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  additionalCoversForm: FormGroup;
  checkBoxes: any[] = []; // 存储接口返回的复选框数据
  noYears: any[] = []; // 你的年份数据

  constructor(private fb: FormBuilder, private _getCheckboxvalueService: YourService) {}

  ngOnInit() {
    // 初始化表单
    this.additionalCoversForm = this.fb.group({
      additionalCovers: this.fb.array([]),
      noYears: ['']
    });
    this.GetQueryAdditionalCovers();
  }

  // 获取表单数组
  get additionalCovers(): FormArray {
    return this.additionalCoversForm.get('additionalCovers') as FormArray;
  }

  GetQueryAdditionalCovers() {
    this._getCheckboxvalueService.getCheckBoxValues("GetAdditionalCovers").then(result => {
      this.checkBoxes = result;
      // 清空现有表单数组，添加新的复选框控件
      this.additionalCovers.clear();
      result.forEach(() => {
        this.additionalCovers.push(this.fb.control(false)); // 默认未选中
      });
    });
  }

  onSubmit() {
    console.log(this.additionalCoversForm.value);
    // 这里可以处理表单提交逻辑
  }
}

HTML部分 #

<div class="additionalcovers-form">
  <form [formGroup]="additionalCoversForm" class="col-md-12" (ngSubmit)="onSubmit()">
    <div class="row" *ngIf="checkBoxes.length > 0">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-6" *ngFor="let control of additionalCovers.controls; let i=index">
            <input type="checkbox" 
                   formControlName="{{i}}" 
                   id="{{checkBoxes[i].displayValue}}" 
                   value="{{checkBoxes[i].displayValue}}" 
                   (change)="toggleVisibility($event)">
            <label>{{ checkBoxes[i].displayValue }}</label>
          </div>
          <div class="col-md-6">
            <label>No Years</label>
            <select formControlName="noYears">
              <option *ngFor="let objNoYears of noYears" [value]="objNoYears.displayValue">{{objNoYears.displayValue}}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加提交按钮 -->
    <button type="submit">Submit</button>
  </form>
</div>

内容的提问来源于stack exchange，提问作者Alvina Jose