Skip to content

Commit 268a4c5

Browse files
kdinevkdinev
authored
Merge branch '10.2.x' into ttonev/fix-8512-10.2.x
2 parents 3f8538d + 5d7c0c3 commit 268a4c5

File tree

13 files changed

+179
-105
lines changed

13 files changed

+179
-105
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"start": "ng serve --open --configuration hmr",
77
"start:es5": "ng serve --open --configuration es5",
88
"build": "ng build",
9-
"test": "ng test",
9+
"test": "ng test igniteui-angular",
1010
"lint": "ng lint",
1111
"e2e": "ng e2e",
1212
"test:lib": "ng test igniteui-angular --watch=false --no-progress --code-coverage",

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1179,9 +1179,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
11791179
if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
11801180
(this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {
11811181
if (!this.collapsed || this.inputGroup.isFocused) {
1182-
this.valid = this.ngControl.valid ? IgxComboState.VALID : IgxComboState.INVALID;
1182+
this.valid = this.ngControl.invalid ? IgxComboState.INVALID : IgxComboState.VALID;
11831183
} else {
1184-
this.valid = this.ngControl.valid ? IgxComboState.INITIAL : IgxComboState.INVALID;
1184+
this.valid = this.ngControl.invalid ? IgxComboState.INVALID : IgxComboState.INITIAL;
11851185
}
11861186
}
11871187
this.manageRequiredAsterisk();
@@ -1201,7 +1201,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
12011201
public onBlur() {
12021202
if (this.collapsed) {
12031203
this._onTouchedCallback();
1204-
if (this.ngControl && !this.ngControl.valid) {
1204+
if (this.ngControl && this.ngControl.invalid) {
12051205
this.valid = IgxComboState.INVALID;
12061206
} else {
12071207
this.valid = IgxComboState.INITIAL;

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,10 @@
169169
@include e(input) {
170170
@extend %form-group-input--disabled !optional;
171171
}
172+
173+
@include e(textarea) {
174+
@extend %form-group-textarea--disabled !optional;
175+
}
172176
}
173177

174178
@include mx(disabled, required) {
@@ -185,6 +189,10 @@
185189
@include e(input) {
186190
@extend %form-group-input--disabled !optional;
187191
}
192+
193+
@include e(textarea) {
194+
@extend %form-group-textarea--disabled !optional;
195+
}
188196
}
189197

190198
@include m(cosy) {

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1056,6 +1056,14 @@
10561056
}
10571057
}
10581058

1059+
%form-group-textarea--disabled {
1060+
color: --var($theme, 'disabled-text-color') !important;
1061+
1062+
&::placeholder {
1063+
color: --var($theme, 'disabled-placeholder-color');
1064+
}
1065+
}
1066+
10591067
%form-group-textarea--cosy {
10601068
min-height: rem(82px, map-get($base-scale-size, 'cosy'));
10611069
margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'cosy'))};

‎projects/igniteui-angular/src/lib/directives/input/input.directive.spec.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ describe('IgxInput', () => {
208208
expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
209209
expect(igxInput.valid).toBe(IgxInputState.INVALID);
210210

211+
dispatchInputEvent('focus', inputElement, fixture);
211212
igxInput.value = 'test';
212213
fixture.detectChanges();
213214

@@ -330,7 +331,7 @@ describe('IgxInput', () => {
330331
fixture.detectChanges();
331332

332333
expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
333-
expect(igxInput.valid).toBe(IgxInputState.VALID);
334+
expect(igxInput.valid).toBe(IgxInputState.INITIAL);
334335

335336

336337
igxInput.value = '';
@@ -465,6 +466,7 @@ describe('IgxInput', () => {
465466

466467
dispatchInputEvent('focus', input, fixture);
467468
dispatchInputEvent('blur', input, fixture);
469+
dispatchInputEvent('input', input, fixture);
468470

469471
expect(inputGroupElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
470472
expect(igxInput.valid).toBe(IgxInputState.INVALID);
@@ -550,10 +552,13 @@ describe('IgxInput', () => {
550552

551553
dispatchInputEvent('blur', input.nativeElement, fixture);
552554
expect(inputGroup.element.nativeElement.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
555+
expect(input.valid).toBe(IgxInputState.INVALID);
553556

557+
dispatchInputEvent('focus', input.nativeElement, fixture);
554558
input.value = '123';
555559
dispatchInputEvent('input', input.nativeElement, fixture);
556560
expect(inputGroup.element.nativeElement.classList.contains(INPUT_GROUP_VALID_CSS_CLASS)).toBe(true);
561+
expect(input.valid).toBe(IgxInputState.VALID);
557562

558563
dispatchInputEvent('blur', input.nativeElement, fixture);
559564
expect(input.valid).toBe(IgxInputState.INITIAL);
@@ -805,7 +810,7 @@ class DataBoundDisabledInputComponent {
805810
<section>
806811
<igx-input-group>
807812
<label igxLabel>single line</label>
808-
<input type="text" formControlName="str" igxInput>
813+
<input #strinput type="text" formControlName="str" igxInput>
809814
</igx-input-group>
810815
<br>
811816
<igx-input-group>
@@ -827,7 +832,7 @@ class DataBoundDisabledInputComponent {
827832
</form>`
828833
})
829834
class ReactiveFormComponent {
830-
@ViewChild(IgxInputDirective, { static: true }) public strIgxInput: IgxInputDirective;
835+
@ViewChild('strinput', { static: true, read: IgxInputDirective }) public strIgxInput: IgxInputDirective;
831836

832837
form = this.fb.group({
833838
str: ['', Validators.required],

‎projects/igniteui-angular/src/lib/directives/input/input.directive.ts‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
7575
@Input()
7676
set value(value: any) {
7777
this.nativeElement.value = value ?? '';
78-
this.checkValidity();
78+
this.updateValidityState();
7979
}
8080
/**
8181
* Gets the `value` property.
@@ -131,15 +131,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
131131
*/
132132
@Input()
133133
public set required(value: boolean) {
134-
if (typeof value === 'boolean') {
135-
this.nativeElement.required = this.inputGroup.isRequired = value;
136-
137-
if (value && !this.nativeElement.checkValidity()) {
138-
this._valid = IgxInputState.INVALID;
139-
} else {
140-
this._valid = IgxInputState.INITIAL;
141-
}
142-
}
134+
this.nativeElement.required = this.inputGroup.isRequired = value;
143135
}
144136

145137
/**
@@ -190,8 +182,8 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
190182
* @hidden
191183
* @internal
192184
*/
193-
@HostListener('focus', ['$event'])
194-
public onFocus(event) {
185+
@HostListener('focus')
186+
public onFocus() {
195187
this.inputGroup.isFocused = true;
196188
}
197189
/**
@@ -200,25 +192,18 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
200192
* @hidden
201193
* @internal
202194
*/
203-
@HostListener('blur', ['$event'])
204-
public onBlur(event) {
195+
@HostListener('blur')
196+
public onBlur() {
205197
this.inputGroup.isFocused = false;
206-
this._valid = IgxInputState.INITIAL;
207-
if (this.ngControl) {
208-
if (!this.ngControl.valid) {
209-
this._valid = IgxInputState.INVALID;
210-
}
211-
} else if (this._hasValidators() && !this.nativeElement.checkValidity()) {
212-
this._valid = IgxInputState.INVALID;
213-
}
198+
this.updateValidityState();
214199
}
215200
/**
216201
* @hidden
217202
* @internal
218203
*/
219204
@HostListener('input')
220205
public onInput() {
221-
this.checkValidity();
206+
this.checkNativeValidity();
222207
}
223208
/**
224209
* @hidden
@@ -293,21 +278,28 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
293278
if (this.disabled !== this.ngControl.disabled) {
294279
this.disabled = this.ngControl.disabled;
295280
}
296-
if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
297-
if (this.ngControl.control.touched || this.ngControl.control.dirty) {
298-
// TODO: check the logic when control is touched or dirty
299-
if (this.inputGroup.isFocused) {
300-
// the user is still typing in the control
301-
this._valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
281+
this.updateValidityState();
282+
}
283+
/**
284+
* @hidden
285+
* @internal
286+
*/
287+
protected updateValidityState() {
288+
if (this.ngControl) {
289+
if (this.ngControl.control.validator || this.ngControl.control.asyncValidator) {
290+
if (!this.disabled && (this.ngControl.control.touched || this.ngControl.control.dirty)) {
291+
// the control is not disabled and is touched or dirty
292+
this._valid = this.ngControl.invalid ?
293+
IgxInputState.INVALID : this.focused ? IgxInputState.VALID :
294+
IgxInputState.INITIAL;
302295
} else {
303-
// the user had touched the control previously but now the value is changing due to changes in the form
304-
this._valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
296+
// if control is untouched, pristine, or disabled its state is initial. This is when user did not interact
297+
// with the input or when form/control is reset
298+
this._valid = IgxInputState.INITIAL;
305299
}
306-
} else {
307-
// if control is untouched and pristine its state is initial. This is when user did not interact
308-
// with the input or when form/control is reset
309-
this._valid = IgxInputState.INITIAL;
310300
}
301+
} else {
302+
this.checkNativeValidity();
311303
}
312304
}
313305
/**
@@ -345,8 +337,7 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
345337
return true;
346338
}
347339
}
348-
349-
return !!this.ngControl && (!!this.ngControl.control.validator || !!this.ngControl.control.asyncValidator);
340+
return false;
350341
}
351342

352343
/**
@@ -397,14 +388,17 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
397388
}
398389

399390
/**
400-
* A function to assign a validity property of an input.
391+
* A function to assign a native validity property of an input.
392+
* This should be used when there's no ngControl
401393
*
402394
* @hidden
403395
* @internal
404396
*/
405-
private checkValidity() {
406-
if (!this.ngControl && this._hasValidators()) {
407-
this._valid = this.nativeElement.checkValidity() ? IgxInputState.VALID : IgxInputState.INVALID;
397+
private checkNativeValidity() {
398+
if (!this.disabled && this._hasValidators()) {
399+
this._valid = this.nativeElement.checkValidity() ?
400+
this.focused ? IgxInputState.VALID : IgxInputState.INITIAL :
401+
IgxInputState.INVALID;
408402
}
409403
}
410404
}

‎projects/igniteui-angular/src/lib/select/select.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
503503
/** @hidden @internal */
504504
public onBlur(): void {
505505
this._onTouchedCallback();
506-
if (this.ngControl && !this.ngControl.valid) {
506+
if (this.ngControl && this.ngControl.invalid) {
507507
this.input.valid = IgxInputState.INVALID;
508508
} else {
509509
this.input.valid = IgxInputState.INITIAL;
@@ -519,9 +519,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
519519
if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
520520
(this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {
521521
if (this.inputGroup.isFocused) {
522-
this.input.valid = this.ngControl.valid ? IgxInputState.VALID : IgxInputState.INVALID;
522+
this.input.valid = this.ngControl.invalid ? IgxInputState.INVALID : IgxInputState.VALID;
523523
} else {
524-
this.input.valid = this.ngControl.valid ? IgxInputState.INITIAL : IgxInputState.INVALID;
524+
this.input.valid = this.ngControl.invalid ? IgxInputState.INVALID : IgxInputState.INITIAL;
525525
}
526526
}
527527
this.manageRequiredAsterisk();

‎src/app/combo/combo.sample.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
<h5 class="sample-title">Template Form</h5>
1717
<form>
1818
<igx-combo class="input-container" [placeholder]="'Locations'" name="anyName" #comboModel="ngModel"
19-
[(ngModel)]="values1" [ngModelOptions]="{ updateOn: 'blur' }" minlength="2" required
20-
[data]="items" [filterable]="filterableFlag" [displayKey]="valueKeyVar"
19+
[(ngModel)]="values1" minlength="2" required
20+
[data]="items" [filterable]="filterableFlag" [displayKey]="valueKeyVar" [disabled]="isDisabled"
2121
[valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
2222
<label igxLabel>States</label>
2323
<igx-hint>Please select the states you've visited</igx-hint>
@@ -79,6 +79,8 @@ <h5 class="sample-title">Reactive Form</h5>
7979
</div>
8080
<div class="btn-wrapper mb24">
8181
<div class="btn-container">
82+
<button igxButton="raised" igxRipple (click)="isDisabled = !isDisabled">Toggle disabled
83+
</button>
8284
<button igxButton="raised" igxRipple (click)="toggleItem('Connecticut')">Toggle "Connecticut"
8385
</button>
8486
<button igxButton="raised" igxRipple (click)="changeItemTemplate()">Change Item Template</button>

‎src/app/combo/combo.sample.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,13 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
4141
@ViewChild('comboTemplate', { read: IgxComboComponent }) public comboTemplate: IgxComboComponent;
4242
alignment = ButtonGroupAlignment.vertical;
4343
public toggleItemState = false;
44-
private initData: any[] = [];
4544
public filterableFlag = true;
4645
public customValuesFlag = true;
4746
public autoFocusSearch = true;
4847
public items: any[] = [];
4948
public values1: Array<any> = ['Arizona'];
5049
public values2: Array<any>;
50+
public isDisabled = false;
5151

5252
public valueKeyVar = 'field';
5353
public currentDataType = '';
@@ -113,7 +113,6 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
113113
field: e,
114114
region: key.substring(0, key.length - 3)
115115
});
116-
this.initData = this.items;
117116
});
118117
}
119118
}

0 commit comments

Comments
 (0)