Validation behavior for igx-combo with required attribute when using invalid or empty values in ngModel or reactive forms

[georgianastasov]

Description

When the igx-combo component is marked as required and initialized with an invalid value in ngModel or reactive forms, the valid property of the combo is set to true even when no valid selection is present. This behavior is inconsistent with the expected validation result, where the valid property should be false if an invalid value is provided or if the selected array is empty.

This issue is related to this PR, where more information can be found.

• igniteui-angular version: *
• browser: all

Steps to reproduce

1. Initialize an igx-combo component with the required attribute and bind it to an ngModel with an invalid initial value:

public items: any[] = ['Mango', 'Banana', 'Apple'];
public ngModelValue = ['invalid value'];

<igx-combo
  #comboModel
  #myComboModel="ngModel"
  required
  [data]="items"
  [(ngModel)]="ngModelValue"
>
  <label igxLabel>Fruits</label>
</igx-combo>

2. Observe the following:

   • comboModel.selection.length is 0 (as expected).
   • The read-only input field displays no value (as expected).
   • myComboModel.valid is true (unexpected, should be false).

3. Repeat the above steps for an igx-combo inside a reactive form and observe similar validation behavior:

public genres: any[] = ['Action', 'Comedy', 'Adventure'];
public user: UntypedFormGroup;

constructor(fb: UntypedFormBuilder) {
  this.user = fb.group({
    genres: [['test'], Validators.required],
  });
}

<form [formGroup]="user">
  <igx-combo
    [data]="genres"
    formControlName="genres"
  >
    <label igxLabel>Movies</label>
  </igx-combo>
</form>

4. Observe the following in the reactive form configuration:
   • selection is 0 (as expected).
   • The read-only input field displays no value (as expected).
   • reactive form valid is true (unexpected, should be false).

Result

The valid property of igx-combo returns true even when an invalid selection or an empty array is provided, which does not align with the required validation logic.

Expected result

The valid property of igx-combo should return false if the provided value does not match any entry in the data source or if the selection is empty while required is set to true.

Attachments

Here is a sample that demonstrates the configuration.