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 });

20
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View File

@@ -22,7 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
import { DateAdapter } from '@angular/material/core';
import { isEqual, subDays, addDays } from 'date-fns';
describe('DateWidgetComponent', () => {
describe('DateCloudWidgetComponent', () => {
let widget: DateCloudWidgetComponent;
let fixture: ComponentFixture<DateCloudWidgetComponent>;
let element: HTMLElement;
@@ -443,5 +443,23 @@ describe('DateWidgetComponent', () => {
expect(element.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');
});
});
});

2
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
View File

@@ -101,7 +101,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
}
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 });

29
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
View File

@@ -336,9 +336,8 @@ describe('DropdownCloudWidgetComponent', () => {
});
});
it('should be able to display label with asterisk', async () => {
it('should be able to display label with asterisk', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
@@ -346,9 +345,8 @@ describe('DropdownCloudWidgetComponent', () => {
expect(asterisk.textContent).toEqual('*');
});
it('should display a required error when dropdown is required and has no value after an interaction', async () => {
it('should display a required error when dropdown is required and has no value after an interaction', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
@@ -356,7 +354,6 @@ describe('DropdownCloudWidgetComponent', () => {
dropdownSelect.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
@@ -364,10 +361,9 @@ describe('DropdownCloudWidgetComponent', () => {
expect(requiredErrorElement.nativeElement.innerText).toEqual('FORM.FIELD.REQUIRED');
});
it('should NOT display a required error when dropdown is readonly', async () => {
it('should NOT display a required error when dropdown is readonly', () => {
widget.field.readOnly = true;
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
@@ -375,10 +371,27 @@ describe('DropdownCloudWidgetComponent', () => {
dropdownSelect.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
});
it('should be valid when field is hidden with empty value', () => {
widget.field.isVisible = false;
fixture.detectChanges();
expect(widget.field.isValid).toBeTrue();
expect(widget.dropdownControl.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.dropdownControl.valid).toBeFalse();
expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
});
});
describe('filter', () => {

2
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
View File

@@ -198,7 +198,7 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
}
private updateFormControlState(): void {
this.dropdownControl.setValidators(this.isRequired() ? [Validators.required] : []);
this.dropdownControl.setValidators(this.isRequired() && this.field?.isVisible ? [Validators.required] : []);
this.field?.readOnly || this.readOnly
? this.dropdownControl.disable({ emitEvent: false })

3
lib/process-services-cloud/src/lib/form/components/widgets/file-viewer/file-viewer.widget.ts
View File

@@ -19,13 +19,14 @@ import { Component, ViewEncapsulation } from '@angular/core';
import { FormService, BaseViewerWidgetComponent, ErrorWidgetComponent } from '@alfresco/adf-core';
import { AlfrescoViewerComponent } from '@alfresco/adf-content-services';
import { TranslateModule } from '@ngx-translate/core';
import { NgIf } from '@angular/common';
/* eslint-disable @angular-eslint/component-selector */
@Component({
selector: 'file-viewer-widget',
standalone: true,
imports: [ErrorWidgetComponent, AlfrescoViewerComponent, TranslateModule],
imports: [NgIf, ErrorWidgetComponent, AlfrescoViewerComponent, TranslateModule],
templateUrl: './file-viewer.widget.html',
styleUrls: ['./file-viewer.widget.scss'],
host: {

18
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts
View File

@@ -179,6 +179,24 @@ describe('DropdownWidgetComponent', () => {
expect(element.querySelector('.adf-invalid')).toBeFalsy();
});
it('should be valid when field is hidden with empty value', () => {
widget.field.isVisible = false;
fixture.detectChanges();
expect(widget.field.isValid).toBeTrue();
expect(widget.dropdownControl.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.dropdownControl.valid).toBeFalse();
expect(widget.field.validationSummary.message).toBe('FORM.FIELD.REQUIRED');
});
});
describe('when template is ready', () => {

2
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.ts
View File

@@ -150,7 +150,7 @@ export class DropdownWidgetComponent extends WidgetComponent implements OnInit,
}
private updateFormControlState(): void {
this.dropdownControl.setValidators(this.isRequired() ? [this.customRequiredValidator(this.field)] : []);
this.dropdownControl.setValidators(this.isRequired() && this.field?.isVisible ? [this.customRequiredValidator(this.field)] : []);
this.field?.readOnly || this.readOnly
? this.dropdownControl.disable({ emitEvent: false })
: this.dropdownControl.enable({ emitEvent: false });