Angular 10响应式表单-在表单显示后更新复选框数组

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'方法返回一个'布尔'值)

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

发现问题- '<smart-checkbox'>'与响应式表单不兼容。将这个标签更改为标准复选框，一切都可以正常工作。