smart-check-box and Angular reactive form – how to set value?

[davout]

I have a list of checkboxes in an Angular 10 reactive form
The values are pushed into the form after it has been created
Here’s a section of the form…

<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" ).value">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>
</div>

Here is the code pushing data into the form controls

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)
});

This generates the following error
ERROR Invalid ‘value’ property value type! Actual type: ‘boolean’, Expected type: ‘string’!
Any suggestions?

[davout]

By experiment I’ve found that “smart-check-box” does not work with reactive forms.   Is there another version of a check box that I can use from your Smart product?
What does ‘smart-check-input’ do?

[admin]

Hi davout,
1. The error message means that a String is expected.
2. We have 1 checkbox component.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[davout]

What string?  Please provide an example, because when I have tried converting the boolean to a string this does  not work, as shown below
stateWIP: data.stateFilter.hasState(GdTaskWorkflowState.wip) === true ? ‘true’ : ‘false’,
Anyhow,  the component is included on this list https://www.htmlelements.com/docs/angular-reactive-forms/   but it does not support the standard way of communicating

[admin]

Hi davout,
If you think that you have found an error, then please share an example, which we will be able to run, and instructions to reproduce the issue.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[davout]

Replication steps

1. Start a new Angular project
2. Add a new component
3. In the component HTML set a reactive form with two ‘smart-check-box’ checkboxes
4. In the component init code set up the form with two FormControl elements that pass in an initial false starting value
5. Else where in the component code push values into the form using the ‘setValue’ method.
6. Try pushing true boolean values into the controls to check the checkboxes – note the error that arises
7. Try pushing true string values into the controls – note how the UX does not show the control as checked

[admin]

Hi davout,
Ok, thanks. We will Test that. If we find an issue, it will be resolved in the next smart-webcomponents-angular NPM package.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts