[Combobox, MultiCombobox]: No FormControl support

[ilhan007]

Created the issue on behalf of SAP Build Process Automation: Combobox, MultiCombobox - FormControl support is missing.

Expected Behavior

Steps to Reproduce

1. Go to '...'
2. ...
3. ...

Isolated Example

Context

• UI5 Web Components version: {...}
• UI5 Web Components for Angular version: {...}
• Angular Version: {...}
• OS/Platform: {...}
• Browser: {...}
• Affected component: {...}

Log Output / Stack Trace / Screenshots

{...}

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: {...}
• Business impact: {...}

[github-actions[bot]]

Hello @ilhan007, thank you for using ui5-webcomponents-ngx! The ui5-webcomponents-ngx team will triage your issue as soon as possible.

[ilhan007]

Hello @droshev this is one of the latest issues raised. Meanwhile I will ask the authors for more information. Thank you.

[ilhan007]

Hello @timogeib

The following works for me with the ComboBox:

<ui5-combobox [formControl]="cbxControl">
        <ui5-cb-item value="phone" text="Phone"></ui5-cb-item>
        <ui5-cb-item value="tablet" text="Tablet"></ui5-cb-item>
        <ui5-cb-item value="desktop" text="Desktop"></ui5-cb-item>
 </ui5-combobox>
 FormControl value: {{ cbxControl.value }}, touched: {{ cbxControl.touched }}
<button (click)="updateCbxFormModel()">cbxControl.setValue("phone")</button>

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'reactive-form-sample',
  templateUrl: './reactiveFormSample.component.html',
})
export class ReactiveFormsSample {

  cbxControl = new FormControl('desktop');

  updateCbxFormModel() {
    this.cbxControl.setValue("phone");
  }
}

https://github.com/SAP/ui5-webcomponents-ngx/assets/15702139/46400410-73ca-4a1d-85ed-05623e2e07e8

[timogeib]

@ilhan007 Please be aware of the touched flag, which will not be set to true...

[g-cheishvili]

All works, except the fact that the value should be something. It can not be undefined or null and if that's the problem, the issue should be recorded in @ui5/webcomponents repository