[Combobox, MultiCombobox]: No FormControl support

Question

[Combobox, MultiCombobox]: No FormControl support

ilhan007 opened this issue a year ago · 5 comments

ilhan007 commented a year ago

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

Expected Behavior

Steps to Reproduce

Go to '...'
...
...

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
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: {...}

Answer 1 · 2023-11-01T06:57:39.000Z

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

Answer 2 · 2023-11-01T06:58:40.000Z

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

Answer 3 · 2023-11-09T16:59:58.000Z

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

Screen.Recording.2023-11-09.at.18.59.18.mov

Answer 4 · 2023-11-10T07:30:30.000Z

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

Answer 5 · 2024-01-05T19:30:34.000Z

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