Question

我的服务器向每个详细项目发送了一个调味品数组，然后我需要将选择的值作为字符串数组发送回。

我想使用formArray以反应形式覆盖复选框默认值true | false。

选中此复选框后，表单模型中的字符串值将被替换为true，然后未选中则被替换为false。

这就是我现在拥有的：

代码：

this.form = this.fb.group({
            condiments: this.fb.array([
                'KETCHUP',
                'RELISH',
                'MUSTARD',
                'MAYO'
            ])
         });

模板（引导程序4）：

<div class="custom-control custom-checkbox" formArrayName="condiments" *ngFor="let condiment of form.controls.condiments.controls; let i = index">
  <input [formControlName]="i" type="checkbox" class="custom-control-input" id="customCheck{{i}}">
  <label class="custom-control-label" for="customCheck{{i}}">{{ condiment.value }}</label>
</div>

未选择KETCHUP的结果：

"condiments": [
  false,
  "RELISH",
  "MUSTARD",
  "MAYO"
 ]

我想在未选中为空字符串以及选中为初始值时指定复选框的值。

这个想法是，当我提交表单时，服务器期望有一系列选择。

也许我用了错误的方法，我需要维护2个数组？

Angular 6-反应形式和复选框值

0 个答案: