Skip to content

Commit d12ff01

Browse files
IvayloGLipata
IvayloG
authored and
Lipata
committed
Add combo required asterisk #4918 
1 parent 5cb7981 commit d12ff01

File tree

6 files changed

+196
-43
lines changed

6 files changed

+196
-43
lines changed

‎projects/igniteui-angular/src/lib/combo/combo.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{{ item[key] }}
1515
</ng-template>
1616

17-
<igx-input-group [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
17+
<igx-input-group #inputGroup [displayDensity]="displayDensity" [type]="type" (click)="onInputClick($event)">
1818
<ng-container ngProjectAs="[igxLabel]">
1919
<ng-content select="[igxLabel]"></ng-content>
2020
</ng-container>
@@ -81,4 +81,4 @@
8181
</div>
8282
<ng-container *ngTemplateOutlet="footerTemplate">
8383
</ng-container>
84-
</igx-combo-drop-down>
84+
</igx-combo-drop-down>

‎projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

+93-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
55
import { SortingDirection } from '../data-operations/sorting-expression.interface';
66
import { IgxToggleModule } from '../directives/toggle/toggle.directive';
77
import { IgxComboItemComponent } from './combo-item.component';
8-
import { IgxComboComponent, IgxComboModule, IgxComboState, IComboSelectionChangeEventArgs } from './combo.component';
8+
import { IgxComboComponent, IgxComboModule, IComboSelectionChangeEventArgs, IgxComboState } from './combo.component';
99
import { IgxComboDropDownComponent } from './combo-dropdown.component';
1010
import { FormGroup, FormControl, Validators, FormBuilder, ReactiveFormsModule, FormsModule } from '@angular/forms';
1111
import { IForOfState } from '../directives/for-of/for_of.directive';
@@ -17,6 +17,7 @@ import { configureTestSuite } from '../test-utils/configure-suite';
1717
import { IgxDropDownItemBase } from '../drop-down/drop-down-item.base';
1818
import { DisplayDensity, DisplayDensityToken } from '../core/density';
1919
import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/index';
20+
import { IgxInputState } from '../directives/input/input.directive';
2021

2122
const CSS_CLASS_COMBO = 'igx-combo';
2223
const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -40,6 +41,7 @@ const CSS_CLASS_INPUTGROUP = 'igx-input-group';
4041
const CSS_CLASS_INPUTGROUP_WRAPPER = 'igx-input-group__wrapper';
4142
const CSS_CLASS_INPUTGROUP_BUNDLE = 'igx-input-group__bundle';
4243
const CSS_CLASS_INPUTGROUP_MAINBUNDLE = 'igx-input-group__bundle-main';
44+
const CSS_CLASS_INPUTGROUP_REQUIRED = 'igx-input-group--required';
4345
const CSS_CLASS_INPUTGROUP_BORDER = 'igx-input-group__border';
4446
const CSS_CLASS_HEADER = 'header-class';
4547
const CSS_CLASS_FOOTER = 'footer-class';
@@ -76,7 +78,8 @@ describe('igxCombo', () => {
7678
IgxComboFormComponent,
7779
SimpleBindComboComponent,
7880
DensityParentComponent,
79-
DensityInputComponent
81+
DensityInputComponent,
82+
IgxComboInTemplatedFormComponent
8083
],
8184
imports: [
8285
IgxComboModule,
@@ -3048,7 +3051,6 @@ describe('igxCombo', () => {
30483051
});
30493052

30503053
describe('Form control tests: ', () => {
3051-
30523054
it('Should properly initialize when used as a form control', fakeAsync(() => {
30533055
const fix = TestBed.createComponent(IgxComboFormComponent);
30543056
fix.detectChanges();
@@ -3060,21 +3062,26 @@ describe('igxCombo', () => {
30603062
expect(combo.selectedItems().length).toEqual(1);
30613063
expect(combo.selectedItems()[0].field).toEqual('Connecticut');
30623064
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3065+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
30633066
const clearButton = fix.debugElement.query(By.css('.' + CSS_CLASS_CLEARBUTTON)).nativeElement;
30643067
clearButton.click();
30653068
fix.detectChanges();
30663069
expect(combo.valid).toEqual(IgxComboState.INVALID);
3070+
expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
30673071

30683072
combo.onBlur();
30693073
fix.detectChanges();
30703074
expect(combo.valid).toEqual(IgxComboState.INVALID);
3075+
expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
30713076

30723077
combo.selectItems([combo.dropdown.items[0], combo.dropdown.items[1]]);
30733078
expect(combo.valid).toEqual(IgxComboState.VALID);
3079+
expect(combo.comboInput.valid).toEqual(IgxInputState.VALID);
30743080

30753081
combo.onBlur();
30763082
fix.detectChanges();
30773083
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3084+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
30783085
}));
30793086

30803087
it('Should properly initialize when used as a form control - without validators', fakeAsync(() => {
@@ -3090,21 +3097,26 @@ describe('igxCombo', () => {
30903097
expect(combo.selectedItems().length).toEqual(1);
30913098
expect(combo.selectedItems()[0].field).toEqual('Connecticut');
30923099
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3100+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
30933101
const clearButton = fix.debugElement.query(By.css('.' + CSS_CLASS_CLEARBUTTON)).nativeElement;
30943102
clearButton.click();
30953103
fix.detectChanges();
30963104
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3105+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
30973106

30983107
combo.onBlur();
30993108
fix.detectChanges();
31003109
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3110+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
31013111

31023112
combo.selectItems([combo.dropdown.items[0], combo.dropdown.items[1]]);
31033113
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3114+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
31043115

31053116
combo.onBlur();
31063117
fix.detectChanges();
31073118
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3119+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
31083120
}));
31093121

31103122
it('Should be possible to be enabled/disabled when used as a form control', () => {
@@ -3196,6 +3208,36 @@ describe('igxCombo', () => {
31963208
fixture.detectChanges();
31973209
expect(fixture.componentInstance.comboSelectedItems).toEqual([...data].splice(1, 3));
31983210
}));
3211+
3212+
it('Should properly initialize when used in a Template form control', fakeAsync (() => {
3213+
const fix = TestBed.createComponent(IgxComboInTemplatedFormComponent);
3214+
fix.detectChanges();
3215+
tick();
3216+
3217+
const combo = fix.componentInstance.testCombo;
3218+
expect(combo.valid).toEqual(IgxComboState.INITIAL);
3219+
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
3220+
const inputGroupRequired = fix.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_REQUIRED));
3221+
expect(inputGroupRequired).toBeDefined();
3222+
combo.onBlur();
3223+
fix.detectChanges();
3224+
tick();
3225+
expect(combo.valid).toEqual(IgxComboState.INVALID);
3226+
expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
3227+
3228+
combo.selectAllItems();
3229+
fix.detectChanges();
3230+
tick();
3231+
expect(combo.valid).toEqual(IgxComboState.VALID);
3232+
expect(combo.comboInput.valid).toEqual(IgxInputState.VALID);
3233+
3234+
const clearButton = fix.debugElement.query(By.css('.' + CSS_CLASS_CLEARBUTTON)).nativeElement;
3235+
clearButton.click();
3236+
fix.detectChanges();
3237+
tick();
3238+
expect(combo.valid).toEqual(IgxComboState.INVALID);
3239+
expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
3240+
}));
31993241
});
32003242

32013243
describe('Combo - Display Density', () => {
@@ -3553,6 +3595,54 @@ class IgxComboFormComponent {
35533595
onSubmitTemplateBased() { }
35543596
}
35553597

3598+
@Component({
3599+
template: `
3600+
<form>
3601+
<igx-combo #testCombo class="input-container" [placeholder]="'Locations'"
3602+
name="anyName" required [(ngModel)]="values"
3603+
[data]="items" [filterable]="filterableFlag"
3604+
[displayKey]="'field'" [valueKey]="'field'"
3605+
[groupKey]="'field' ? 'region' : ''" [width]="'100%'">
3606+
<label igxLabel>Combo Label</label>
3607+
</igx-combo>
3608+
</form>
3609+
`
3610+
})
3611+
class IgxComboInTemplatedFormComponent {
3612+
@ViewChild('testCombo', { read: IgxComboComponent, static: true }) testCombo: IgxComboComponent;
3613+
public items: any[] = [];
3614+
public values: Array<any>;
3615+
3616+
constructor() {
3617+
const division = {
3618+
'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
3619+
'New England 02': ['New Hampshire', 'Rhode Island', 'Vermont'],
3620+
'Mid-Atlantic': ['New Jersey', 'New York', 'Pennsylvania'],
3621+
'East North Central 02': ['Michigan', 'Ohio', 'Wisconsin'],
3622+
'East North Central 01': ['Illinois', 'Indiana'],
3623+
'West North Central 01': ['Missouri', 'Nebraska', 'North Dakota', 'South Dakota'],
3624+
'West North Central 02': ['Iowa', 'Kansas', 'Minnesota'],
3625+
'South Atlantic 01': ['Delaware', 'Florida', 'Georgia', 'Maryland'],
3626+
'South Atlantic 02': ['North Carolina', 'South Carolina', 'Virginia'],
3627+
'South Atlantic 03': ['District of Columbia', 'West Virginia'],
3628+
'East South Central 01': ['Alabama', 'Kentucky'],
3629+
'East South Central 02': ['Mississippi', 'Tennessee'],
3630+
'West South Central': ['Arkansas', 'Louisiana', 'Oklahome', 'Texas'],
3631+
'Mountain': ['Arizona', 'Colorado', 'Idaho', 'Montana', 'Nevada', 'New Mexico', 'Utah', 'Wyoming'],
3632+
'Pacific 01': ['Alaska', 'California'],
3633+
'Pacific 02': ['Hawaii', 'Oregon', 'Washington']
3634+
};
3635+
const keys = Object.keys(division);
3636+
for (const key of keys) {
3637+
division[key].map((e) => {
3638+
this.items.push({
3639+
field: e,
3640+
region: key.substring(0, key.length - 3)
3641+
});
3642+
});
3643+
}
3644+
}
3645+
}
35563646
@Injectable()
35573647
export class LocalService {
35583648
public getData() {

0 commit comments

Comments
 (0)