I'；我试图通过angular form builder发送多个复选框，但它不起作用

运行此代码时，前端上的复选框不可见。我试图做的是从用户那里获取复选框的多个输入，并将其发送到api。请为此提供帮助。

 <form [formGroup]="form" (submit)="submit(form.value)">
        <div *ngFor="let addon of addOns; let i = index">
                <input type="checkbox" [formControl] ="addOn">
                {{user.addOns[i].name}}
        </div>
        <button type="submit">
                Calculate Premium
        </button>
    </form>
    {{ form.value | json }}

---

问题在于您编写的get函数

getAddOns（）

应该是

get addOns（）

，因为它是getter函数，在我们创建表单组时使用它，在这一行

addOns:this.buildAddOns（）

我尝试了代码只是为了检查， 你可以查一下

     export class FourWheelerComponent implements OnInit {

  user ={
    addOns:[
      {name:'IsValidDrivingLicense', selected:true, id:1},
      {name:'IsMoreThanOneVehicle', selected:false, id:2},
      {name:'IsNoPrevInsurance', selected:false, id:3},
      {name:'IsTransferOfNCB', selected:false, id:4}
    ]
  }
  form;

  constructor(private fb: FormBuilder,
  private _quoteService: QuoteService) { 
    console.clear();

    this.form = this.fb.group({
      addOns:this.buildAddOns()
    });
    console.log(this.form.get("addOns"))
  }



  ngOnInit() {


  }
  getAddOns(): FormArray{
    return this.form.get('addOns') as FormArray;
  };

  buildAddOns(){
    const arr = this.user.addOns.map(s=>{
      return this.fb.control(s.selected,);
    })
    return this.fb.array(arr);
  }


  submit(value){
    const f = Object.assign({}, value, {
      addOns: value.addOns.map((s,i) =>{
        return{
          name: this.user.addOns[i].name,
          selected:s,

        }
      })
    });
    console.log(f);
  }

}