feature(digi-ng-migrering): Valideringsmeddelanden är nu flyttat från digi till vår kod (TV-861)
Merge in TEA/mina-sidor-fa-web from feature/TV-861-digi-ng-form-validation-message to develop Squashed commit of the following: commit 0f499871aca875dfcca640e8fbf871f52adc33d3 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 19 11:54:42 2021 +0100 fix minor bugs commit ba3d2784903127e1b9dacbd04ad523a846cfe3f4 Merge: 20a004ba981fb51dAuthor: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Fri Nov 19 11:51:17 2021 +0100 Merge branch 'develop' into feature/TV-861-digi-ng-form-validation-message # Conflicts: # apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts # apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts # apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.ts # apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts commit 20a004ba2f75f92043713704305815d60c61e2ef Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Thu Nov 18 15:54:16 2021 +0100 Removed unused messagetypes from validation messages commit 7dd5317267560dfdc95390b32f61b3df1518eb40 Merge: 9ffdefaec6bbfb1bAuthor: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se> Date: Thu Nov 18 15:48:34 2021 +0100 Fixed some issues with a11y commit 9ffdefaea78c90f9d4f0ee3f9b4bf5a157c34667 Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 16:47:47 2021 +0100 removed reference to digiNgFormSelect commit 6c54a0ea9b0f3101adf60c6d04c7ac92010206c9 Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 16:45:29 2021 +0100 Replaced digi-ng-form-sleect with ui-select (handledare-picker and organization-picker-form left. commit 58341f57612bd70204bbdf3f9805bb54f8fc2078 Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 15:56:42 2021 +0100 removed reference in employee-form for digiNgFormSelect commit 663743508264cb781c3cb60682f6e6937a8e4eeb Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 15:50:29 2021 +0100 Replaced digi-ng-form-select with ui-select for edit-employee-form commit fea6215809128f78229cbded5f92fc5de461317e Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 14:33:58 2021 +0100 - Replaced all references to digi-form-validation-message (digi-core) to our new ui-validation-message ( a few left to change in this feature). - Replaced references from digi-ng-form-select to our new ui-select in franvaro-report and signal-form commit 28c152efe90acf766dbd190b12fd262344e39010 Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 10:14:50 2021 +0100 Removed blank space commit 42fa243d15bba562cd019d542e9815350623db63 Merge: a7a4a4c18f05343eAuthor: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 10:10:44 2021 +0100 Merge branch 'develop' into feature/TV-861-digi-ng-form-validation-message commit a7a4a4c111bc7a7cd3704d7c2866fcbb31ef00e0 Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se> Date: Wed Nov 17 10:10:32 2021 +0100 - Created ui-validation-message component for digi-form-validation-message to replace digi-ng´s form-validation. - Removed css style as it did not work earlier and looks the same without (good margin top as it is). FYI: the new validation-message from digi-core includes three types (success, error, warning), digi-ng´s included only two types (success, error).
This commit is contained in:
@@ -10,9 +10,8 @@
|
||||
[afChecked]="currentValue"
|
||||
(afOnChange)="checkForChange($event.detail.target.checked)"
|
||||
></digi-form-checkbox>
|
||||
<div aria-atomic="true" role="alert">
|
||||
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
|
||||
>{{uiValidationMessage}}</digi-form-validation-message
|
||||
>
|
||||
</div>
|
||||
<ui-validation-message
|
||||
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
|
||||
[uiValidationMessage]="uiValidationMessage"
|
||||
></ui-validation-message>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
|
||||
import { CheckboxComponent } from './checkbox.component';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
|
||||
declarations: [CheckboxComponent],
|
||||
exports: [CheckboxComponent],
|
||||
})
|
||||
|
||||
@@ -15,9 +15,8 @@
|
||||
[afValidation]="uiInvalid ? 'error' : 'neutral'"
|
||||
(afOnInput)="checkForChange($event.detail.target.value)"
|
||||
></digi-form-input>
|
||||
<div class="ui-input__validation" aria-atomic="true" role="alert">
|
||||
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
|
||||
>{{uiValidationMessage}}</digi-form-validation-message
|
||||
>
|
||||
</div>
|
||||
<ui-validation-message
|
||||
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
|
||||
[uiValidationMessage]="uiValidationMessage"
|
||||
></ui-validation-message>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
|
||||
import { InputComponent } from './input.component';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
|
||||
declarations: [InputComponent],
|
||||
exports: [InputComponent],
|
||||
})
|
||||
|
||||
@@ -14,9 +14,8 @@
|
||||
(afOnChange)="checkForChange($event.detail.target.value)"
|
||||
></digi-form-radiobutton>
|
||||
</div>
|
||||
<div aria-atomic="true" role="alert">
|
||||
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
|
||||
>{{uiValidationMessage}}</digi-form-validation-message
|
||||
>
|
||||
</div>
|
||||
<ui-validation-message
|
||||
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
|
||||
[uiValidationMessage]="uiValidationMessage"
|
||||
></ui-validation-message>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
OnChanges,
|
||||
Output,
|
||||
} from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
||||
import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { uuid } from '@utils/uuid.util';
|
||||
import { RadiobuttonGroupDirection } from './radiobutton-group-direction.enum';
|
||||
import { Radiobutton } from './radiobutton.model';
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
|
||||
import { RadiobuttonGroupComponent } from './radiobutton-group.component';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
|
||||
declarations: [RadiobuttonGroupComponent],
|
||||
exports: [RadiobuttonGroupComponent],
|
||||
})
|
||||
|
||||
@@ -37,9 +37,8 @@
|
||||
<digi-icon-arrow-down aria-hidden="true" class="ui-select__icon" slot="icon"></digi-icon-arrow-down>
|
||||
</div>
|
||||
</div>
|
||||
<div aria-atomic="true" role="alert">
|
||||
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
|
||||
>{{uiValidationMessage}}</digi-form-validation-message
|
||||
>
|
||||
</div>
|
||||
<ui-validation-message
|
||||
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
|
||||
[uiValidationMessage]="uiValidationMessage"
|
||||
></ui-validation-message>
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { SelectComponent } from './select.component';
|
||||
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
|
||||
declarations: [SelectComponent],
|
||||
exports: [SelectComponent],
|
||||
})
|
||||
|
||||
@@ -18,9 +18,10 @@
|
||||
(afOnInput)="checkForChange($event.detail.target.value)"
|
||||
></digi-form-textarea>
|
||||
<span class="ui-textarea__counter" *ngIf="uiMaxLength">{{charactersLeft}} tecken kvar</span>
|
||||
<div class="ui-textarea__validation" aria-atomic="true" role="alert">
|
||||
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
|
||||
>{{uiValidationMessage}}</digi-form-validation-message
|
||||
>
|
||||
<div class="ui-textarea__validation">
|
||||
<ui-validation-message
|
||||
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
|
||||
[uiValidationMessage]="uiValidationMessage"
|
||||
></ui-validation-message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { TextareaComponent } from './textarea.component';
|
||||
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [CommonModule, ReactiveFormsModule],
|
||||
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule ],
|
||||
declarations: [TextareaComponent],
|
||||
exports: [TextareaComponent],
|
||||
})
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
export enum UiValidationMessageType {
|
||||
SUCCESS = 'success',
|
||||
ERROR = 'error',
|
||||
WARNING = 'warning'
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
<div aria-atomic="true" role="alert">
|
||||
<digi-form-validation-message *ngIf="uiShowValidationMessage" [afVariation]="uiValidationMessageType">
|
||||
{{ uiValidationMessage }}
|
||||
</digi-form-validation-message>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ValidationMessageComponent } from './validation-message.component';
|
||||
|
||||
describe('ValidationMessageComponent', () => {
|
||||
let component: ValidationMessageComponent;
|
||||
let fixture: ComponentFixture<ValidationMessageComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
declarations: [ValidationMessageComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ValidationMessageComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
||||
import { UiValidationMessageType } from './validation-message-type.enum';
|
||||
|
||||
@Component({
|
||||
selector: 'ui-validation-message',
|
||||
templateUrl: './validation-message.component.html',
|
||||
styleUrls: ['./validation-message.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ValidationMessageComponent {
|
||||
@Input() uiValidationMessage: string;
|
||||
@Input() uiValidationMessageType: UiValidationMessageType = UiValidationMessageType.ERROR;
|
||||
@Input() uiShowValidationMessage: boolean;
|
||||
}
|
||||
11
libs/ui/src/validation-message/validation-message.module.ts
Normal file
11
libs/ui/src/validation-message/validation-message.module.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { ValidationMessageComponent } from './validation-message.component';
|
||||
|
||||
@NgModule({
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
imports: [CommonModule],
|
||||
declarations: [ValidationMessageComponent],
|
||||
exports: [ValidationMessageComponent],
|
||||
})
|
||||
export class UiValidationMessageModule {}
|
||||
Reference in New Issue
Block a user