inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-30596 Fix required reactive widgets do not visibility conditions (#10595)

Browse Source 
* AAE-30596 Fix required reactive widgets do not visibility conditions

* fix unit test
This commit is contained in:
Tomasz Gnyp
2025-01-28 10:30:12 +01:00
committed by GitHub
parent 35aec24c0f
commit c4b3b9f3d4
11 changed files with 110 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@@ -262,10 +262,11 @@ describe('DateTimeWidgetComponent', () => {
type: FormFieldTypes.DATETIME,
required: true
});
fixture.detectChanges();
});
it('should be marked as invalid after interaction', () => {
fixture.detectChanges();
const dateTimeInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
@@ -277,11 +278,31 @@ describe('DateTimeWidgetComponent', () => {
});
it('should be able to display label with asterisk', () => {
fixture.detectChanges();
const asterisk = element.querySelector<HTMLElement>('.adf-asterisk');
expect(asterisk).not.toBeNull();
expect(asterisk?.textContent).toEqual('*');
});
it('should be valid when field is hidden with empty value', () => {
widget.field.isVisible = false;
fixture.detectChanges();
expect(widget.field.isValid).toBeTrue();
expect(widget.datetimeInputControl.valid).toBeTrue();
expect(widget.field.validationSummary.message).toBe('');
});
it('should be invalid when field is hidden with empty value', () => {
widget.field.isVisible = true;
fixture.detectChanges();
expect(widget.field.isValid).toBeFalse();
expect(widget.datetimeInputControl.valid).toBeFalse();
expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
});
});
describe('template check', () => {

13
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts
View File

@@ -25,18 +25,13 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerModule } from '@mat-datetimepicker/core';
import { TranslateModule } from '@ngx-translate/core';
import {
ADF_DATE_FORMATS,
ADF_DATETIME_FORMATS,
AdfDateFnsAdapter,
AdfDateTimeFnsAdapter,
DateFnsUtils
} from '../../../../common';
import { ADF_DATE_FORMATS, ADF_DATETIME_FORMATS, AdfDateFnsAdapter, AdfDateTimeFnsAdapter, DateFnsUtils } from '../../../../common';
import { FormService } from '../../../services/form.service';
import { ErrorWidgetComponent } from '../error/error.component';
import { WidgetComponent } from '../widget.component';
import { ErrorMessageModel } from '../core/error-message.model';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReactiveFormWidget } from '../reactive-widget.interface';
@Component({
selector: 'date-time-widget',
@@ -52,7 +47,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
imports: [NgIf, TranslateModule, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, ReactiveFormsModule, ErrorWidgetComponent],
encapsulation: ViewEncapsulation.None
})
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {
export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, ReactiveFormWidget {
minDate: Date;
maxDate: Date;
datetimeInputControl: FormControl<Date> = new FormControl<Date>(null);
@@ -86,7 +81,7 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {
}
private updateFormControlState(): void {
this.datetimeInputControl.setValidators(this.isRequired() ? [Validators.required] : []);
this.datetimeInputControl.setValidators(this.isRequired() && this.field?.isVisible ? [Validators.required] : []);
this.field?.readOnly || this.readOnly
? this.datetimeInputControl.disable({ emitEvent: false })
: this.datetimeInputControl.enable({ emitEvent: false });

22
lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts
View File

@@ -162,11 +162,11 @@ describe('DateWidgetComponent', () => {
type: FormFieldTypes.DATE,
required: true
});
fixture.detectChanges();
});
it('should be marked as invalid after interaction', () => {
fixture.detectChanges();
const dateInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
@@ -175,6 +175,24 @@ describe('DateWidgetComponent', () => {
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be valid when field is hidden with empty value', () => {
widget.field.isVisible = false;
fixture.detectChanges();
expect(widget.field.isValid).toBeTrue();
expect(widget.dateInputControl.valid).toBeTrue();
expect(widget.field.validationSummary.message).toBe('');
});
it('should be invalid when field is hidden with empty value', () => {
widget.field.isVisible = true;
fixture.detectChanges();
expect(widget.field.isValid).toBeFalse();
expect(widget.dateInputControl.valid).toBeFalse();
expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
});
});
describe('template check', () => {

2
lib/core/src/lib/form/components/widgets/date/date.widget.ts
View File

@@ -93,7 +93,7 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, Reac
}
private updateFormControlState(): void {
this.dateInputControl.setValidators(this.isRequired() ? [Validators.required] : []);
this.dateInputControl.setValidators(this.isRequired() && this.field?.isVisible ? [Validators.required] : []);
this.field?.readOnly || this.readOnly
? this.dateInputControl.disable({ emitEvent: false })
: this.dateInputControl.enable({ emitEvent: false });