Skip to content

Commit dca922d

Browse files
ChronosSFChronosSF
committed
chore(*): further changes to input req attrs
1 parent e1ee3c4 commit dca922d

File tree

5 files changed

+30
-29
lines changed

5 files changed

+30
-29
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3439,7 +3439,7 @@ describe('igxCombo', () => {
34393439
input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
34403440
expect(asterisk).toBe('"*"');
34413441
expect(inputGroupIsRequiredClass).toBeDefined();
3442-
expect(input.nativeElement.getAttribute('aria-required')).toMatch('true');
3442+
expect(input.nativeElement.getAttribute('required')).not.toBeNull();
34433443

34443444
fixture.componentInstance.reactiveForm.controls.townCombo.clearValidators();
34453445
fixture.componentInstance.reactiveForm.controls.townCombo.updateValueAndValidity();
@@ -3448,7 +3448,7 @@ describe('igxCombo', () => {
34483448
asterisk = window.getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_LABEL)).nativeElement, ':after').content;
34493449
expect(asterisk).toBe('none');
34503450
expect(inputGroupIsRequiredClass).toBeNull();
3451-
expect(input.nativeElement.getAttribute('aria-required')).toMatch('false');
3451+
expect(input.nativeElement.getAttribute('required')).toBeNull();
34523452

34533453
fixture.componentInstance.reactiveForm.controls.townCombo.setValidators(Validators.required);
34543454
fixture.componentInstance.reactiveForm.controls.townCombo.updateValueAndValidity();
@@ -3457,7 +3457,7 @@ describe('igxCombo', () => {
34573457
asterisk = window.getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_LABEL)).nativeElement, ':after').content;
34583458
expect(asterisk).toBe('"*"');
34593459
expect(inputGroupIsRequiredClass).toBeDefined();
3460-
expect(input.nativeElement.getAttribute('aria-required')).toMatch('true');
3460+
expect(input.nativeElement.getAttribute('required')).not.toBeNull();
34613461
});
34623462

34633463
it('Should update validity state when programmatically setting errors on reactive form controls', fakeAsync(() => {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ describe('IgxDatePicker', () => {
231231

232232
expect(datePicker).toBeDefined();
233233
expect(inputGroup.isRequired).toBeTruthy();
234-
expect((datePicker as any).inputDirective.nativeElement.getAttribute('aria-required')).toEqual('true');
234+
expect((datePicker as any).inputDirective.nativeElement.getAttribute('required')).not.toBeNull();
235235
});
236236

237237
it('should update inputGroup isRequired correctly', () => {
@@ -240,13 +240,13 @@ describe('IgxDatePicker', () => {
240240

241241
expect(datePicker).toBeDefined();
242242
expect(inputGroup.isRequired).toBeTruthy();
243-
expect(inputEl.getAttribute('aria-required')).toEqual('true');
243+
expect(inputEl.getAttribute('required')).not.toBeNull();
244244

245245
(fixture.componentInstance as IgxDatePickerNgModelComponent).isRequired = false;
246246
fixture.detectChanges();
247247

248248
expect(inputGroup.isRequired).toBeFalsy();
249-
expect(inputEl.getAttribute('aria-required')).toEqual(null);
249+
expect(inputEl.getAttribute('required')).toBeNull();
250250
});
251251

252252
it('should set validity to initial when the form is reset', fakeAsync(() => {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -702,7 +702,7 @@ describe('IgxInput', () => {
702702
let asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
703703
expect(asterisk).toBe('"*"');
704704
expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
705-
expect(input.nativeElement.attributes.getNamedItem('aria-required').nodeValue).toEqual('true');
705+
expect(input.nativeElement.getAttribute('required')).not.toBeNull();
706706

707707
// 2) check that input group's --invalid class is NOT applied
708708
expect(inputGroup.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(false);
@@ -718,7 +718,7 @@ describe('IgxInput', () => {
718718

719719
expect(inputGroup.classList.contains(INPUT_GROUP_INVALID_CSS_CLASS)).toBe(true);
720720
expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toBe(true);
721-
expect(input.nativeElement.attributes.getNamedItem('aria-required').nodeValue).toEqual('true');
721+
expect(input.nativeElement.getAttribute('required')).not.toBeNull();
722722

723723
// 3) Check if the input group's --invalid and --required classes are removed when validator is dynamically cleared
724724
fix.componentInstance.removeValidators(formGroup);
@@ -731,7 +731,7 @@ describe('IgxInput', () => {
731731
expect(formReference).toBeDefined();
732732
expect(input).toBeDefined();
733733
expect(input.nativeElement.value).toEqual('');
734-
expect(input.nativeElement.attributes.getNamedItem('aria-required').nodeValue).toEqual('false');
734+
expect(input.nativeElement.getAttribute('required')).toBeNull();
735735
expect(inputGroup.classList.contains(INPUT_GROUP_REQUIRED_CSS_CLASS)).toEqual(false);
736736
expect(asterisk).toBe('none');
737737
expect(input.valid).toEqual(IgxInputState.INITIAL);
@@ -751,7 +751,7 @@ describe('IgxInput', () => {
751751
// interaction test - expect actual asterisk
752752
asterisk = window.getComputedStyle(dom.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').content;
753753
expect(asterisk).toBe('"*"');
754-
expect(input.nativeElement.attributes.getNamedItem('aria-required').nodeValue).toEqual('true');
754+
expect(input.nativeElement.getAttribute('required')).not.toBeNull();
755755
}));
756756

757757
it('should not hold old file input value in form after clearing the input', () => {

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,17 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
9797
@HostBinding('class.igx-input-group__textarea')
9898
public isTextArea = false;
9999

100+
@HostBinding('attr.required')
101+
public get requiredAttribute() {
102+
return this.required ? '' : null;
103+
}
104+
100105
private _valid = IgxInputState.INITIAL;
101106
private _statusChanges$: Subscription;
102107
private _valueChanges$: Subscription;
103108
private _fileNames: string;
104109
private _disabled = false;
110+
private _defaultRequired: boolean = null;
105111
private _externalValidate: () => IgxInputState = null;
106112

107113
constructor(
@@ -181,21 +187,6 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
181187
return this._disabled;
182188
}
183189

184-
/**
185-
* Sets the `required` property.
186-
*
187-
* @example
188-
* ```html
189-
* <input-group>
190-
* <input igxInput #igxInput required>
191-
* </input-group>
192-
* ```
193-
*/
194-
@Input({ transform: booleanAttribute })
195-
public set required(value: boolean) {
196-
this.nativeElement.required = this.inputGroup.isRequired = value;
197-
}
198-
199190
/**
200191
* @hidden @internal
201192
* Sets a function to validate the input externally.
@@ -211,20 +202,30 @@ export class IgxInputDirective implements AfterViewInit, OnDestroy {
211202
}
212203

213204
/**
214-
* Gets whether the igxInput is required.
205+
* Gets/Sets whether the igxInput is required.
215206
*
216207
* @example
217208
* ```typescript
218-
* let isRequired = this.igxInput.required;
209+
* <input-group>
210+
* <input igxInput #igxInput required>
211+
* </input-group>
219212
* ```
220213
*/
214+
@Input({ transform: booleanAttribute })
221215
public get required() {
222216
let validation;
223217
if (this.ngControl && (this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {
224218
validation = this.ngControl.control.validator({} as AbstractControl);
225219
}
226-
return validation && validation.required || this.nativeElement.hasAttribute('required');
220+
return validation && validation.required || !!this._defaultRequired;
227221
}
222+
public set required(value: boolean) {
223+
if (this._defaultRequired === null) {
224+
this._defaultRequired = value;
225+
}
226+
this.inputGroup.isRequired = value;
227+
}
228+
228229
/**
229230
* @hidden
230231
* @internal

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2276,7 +2276,7 @@ describe('IgxSimpleCombo', () => {
22762276

22772277
expect(combo.valid).toEqual(IgxInputState.INITIAL);
22782278
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
2279-
expect(combo.comboInput.nativeElement.attributes['aria-required']).toBeDefined();
2279+
expect(combo.comboInput.nativeElement.attributes['required']).toBeDefined();
22802280

22812281
// empty string
22822282
combo.open();

0 commit comments

Comments
 (0)