Implemented custom validation in the Angular control

[ploutarchos]

The combo-box will now validate whether the selected or typed value is a valid value (i.e. it matches to one of the items of the selection list). If it does, the control marks itself as valid, otherwise it becomes invalid.

A new input property has been introduced, the inputErrorClass to allow us format the input box when the control is marked as invalid.

This implementation works with both ngModel forms and Reactive Forms.

Note: The validation does not occur when remote data is being used. In that case, the control is always marked as invalid which is backwards compatible.

[shochdoerfer]

Thanks for your contribution. We'll check the PR as soon as we can.

[shochdoerfer]

We tested the PR with one of our sample projects but got an error. We need investigate a bit more what when wrong. Once we know, I'll let you know.

[ploutarchos]

What was the error you got?

Also, what are the input properties you used in your app-combo-box?

I tried it with the following ones, and I didn't get any error:

In the Angular template (*.html) add this:

<app-combo-box [listData]="list" [displayField]="'name'" [valueField]="'name'"
                              [inputClass]="'input-class'"
                              [typeAheadDelay]="10"
                              [localFilter]="true"
                              [forceSelection]="false"
                              [(ngModel)]="selectedValue" name="combo"
                              #formControl="ngModel"
></app-combo-box>

Has Error 'empty_input': {{formControl.hasError('empty_input')}}
<br>
Empty input error message: {{formControl.errors.empty_input}}
<br>
Has Error 'input_no_match': {{formControl.hasError('input_no_match')}}
<br>
Input no match error message: {{formControl.errors.input_no_match}}

In the Angular Component (*.ts) add this:

selectedValue;

list: Object[] = [
	{name: 'Test 1'},
	{name: 'Test 2'},
	{name: 'Test 3'},
	{name: 'Test 4'},
	{name: 'Test 5'},
	{name: 'Test 6'},
	{name: 'Test 7'},
	{name: 'Test 8'}
  ];