Angular 10 reactive form -在表单显示后更新复选框数组

Question

我有一个Angular (10)反应式表单，其中包含一个复选框列表

表单中的数据可以在表单显示后更新，但我找不到使用'setValue‘更新复选框的方法。如果我使用'setValue‘来推送布尔值，我会得到“期望的字符串”错误。

有什么建议吗？

表单的一部分如下所示...

 <div id="states" class="in-column" formGroupName="states">
            <h3 class="card-body-title">States</h3>
            <div style="margin-top: 10px">
              <smart-button class="flat">All</smart-button>
              <smart-button class="flat">None</smart-button>
            </div>
            <div>
              <smart-check-box formControlName="stateOpen">Open</smart-check-box>
            </div>
            <div>
              <smart-check-box formControlName="stateWIP">WIP</smart-check-box>
            </div>
            <div>
              <smart-check-box formControlName="statePending">Pending review</smart-check-box>
            </div>
            <div>
              <smart-check-box formControlName="stateOnhold">On hold</smart-check-box>
            </div>
            <div>
              <smart-check-box formControlName="stateSuspended">Suspended</smart-check-box>
            </div>
            <div>
              <smart-check-box formControlName="stateWaiting">Waiting for</smart-check-box>
            </div>
            <div>
              <smart-check-box formControlName="stateDelegated">Delegated</smart-check-box>
            </div>

将数据推入表单的方法的一部分如下所示...(‘hasState’方法返回一个'boolean‘值)

    this.filterForm.get('states').setValue({
      stateOpen: data.stateFilter.hasState(GdTaskWorkflowState.open),
      stateWIP: data.stateFilter.hasState(GdTaskWorkflowState.wip),
      statePending: data.stateFilter.hasState(GdTaskWorkflowState.pendingReview),
      stateOnhold: data.stateFilter.hasState(GdTaskWorkflowState.onHold),
      stateSuspended: data.stateFilter.hasState(GdTaskWorkflowState.suspended),
      stateWaiting: data.stateFilter.hasState(GdTaskWorkflowState.waitingFor),
      stateDelegated: data.stateFilter.hasState(GdTaskWorkflowState.delegated)
    });

Answer 1

尝试将属性名称设置为字符串。例如：

 this.filterForm.get('states').setValue({
      'stateOpen': data.stateFilter.hasState(GdTaskWorkflowState.open),...}

或者，尝试在[]中包装formControlName。

Answer 2

已发现问题-“”与反应式表单不兼容。将此标记更改为标准复选框，一切工作正常。