arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature(digi-ng-migrering): Valideringsmeddelanden är nu flyttat från digi till vår kod (TV-861)

Browse Source 
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: 20a004ba 981fb51d
Author: 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: 9ffdefae c6bbfb1b
Author: 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: a7a4a4c1 8f05343e
Author: 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:
Daniel Appelgren
2021-11-19 11:57:10 +01:00
parent 981fb51d92
commit f166c530d9
42 changed files with 244 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
View File

@@ -18,14 +18,10 @@
[afDisableValidStyle]="true"
[afInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
></digi-ng-form-input>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
af-variation="error"
>{{editEmployeeFormGroup.errors.email}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
[uiValidationMessage]="editEmployeeFormGroup.errors?.email"
></ui-validation-message>
<div class="edit-employee-form__contents">
<div class="edit-employee-form__block">
<h2>Behörigheter</h2>
@@ -34,27 +30,18 @@
<div class="edit-employee-form__block">
<h3>Tjänster</h3>
<p>Välj de tjänster du vill ge personalen tillgång till.</p>
<!-- Vi får se till att bygga en kontrol för att kunna välja flera tjänster här istället, en digi-ng-select får vara en temporär lösning.. -->
<digi-ng-form-select
<!-- Vi får se till att bygga en kontrol för att kunna välja flera tjänster här istället, en ui-selectfår vara en temporär lösning.. -->
<ui-select
[formControl]="tjansterFormControl"
afLabel="Välj tjänster"
[afPlaceholder]="'Välj tjänst'"
[afSelectItems]="selectableTjansterFormItems"
[afDisableValidStyle]="true"
[afInvalid]="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
[afId]="tjansterElementId"
(afOnChange)="toggleTjanst()"
></digi-ng-form-select>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
af-variation="error"
>
{{editEmployeeFormGroup.errors.tjanster}}
</digi-form-validation-message>
</div>
[uiId]="tjansterElementId"
uiLabel="Välj tjänster"
uiPlaceholder="Välj tjänst"
[uiInvalid]="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
[uiOptions]="selectableTjansterFormItems"
(uiOnChange)="toggleTjanst()"
[uiValidationMessage]="editEmployeeFormGroup.errors?.tjanster"
></ui-select>
</div>
<div class="edit-employee-form__block">
<h3>Utförande verksamheter och adresser</h3>
<p>Välj de utförandeverksamheter och utförande adresser du vill ge personalen behörighet till.</p>

8
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
View File

@@ -4,9 +4,8 @@ import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@@ -22,6 +21,8 @@ import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
import { EmployeeFormComponent } from './employee-form.component';
import { UiSelectModule } from '@ui/select/select.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -34,12 +35,13 @@ import { EmployeeFormComponent } from './employee-form.component';
DigiNgFormInputModule,
DigiNgFormRadiobuttonGroupModule,
DigiNgFormDatepickerModule,
DigiNgFormSelectModule,
DigiNgPopoverModule,
DigiNgFormCheckboxModule,
DigiNgButtonModule,
DigiNgLoaderSpinnerModule,
UiSkeletonModule,
UiSelectModule,
UiValidationMessageModule,
LayoutModule,
EmployeeDeleteModule,
DigiNgDialogModule,

20
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html
View File

@@ -35,20 +35,18 @@
<ng-template #formRef>
<form class="avvikelse-report-form__form" [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()">
<div class="avvikelse-report-form__form-item">
<digi-ng-form-select
<ui-select
*ngIf="reasonsAsNgDigiFormSelectItems$ | async as reason; else loadingRef"
[formControlName]="reasonFormName"
afLabel="Orsak till avvikelse"
afPlaceholder="Välj orsak till avvikelse"
[afSelectItems]="reason"
[afRequired]="true"
[afInvalidMessage]="reasonFormControl.errors?.required"
[afAnnounceIfOptional]="true"
[afDisableValidStyle]="true"
[afInvalid]="formControlIsInvalid(reasonFormControl)"
></digi-ng-form-select>
uiLabel="Orsak till avvikelse"
uiPlaceholder="Välj orsak till avvikelse"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
[uiInvalid]="formControlIsInvalid(reasonFormControl)"
[uiOptions]="reason"
[uiValidationMessage]="reasonFormControl.errors?.required"
></ui-select>
</div>
<div
class="avvikelse-report-form__form-item avvikelse-report-form__textareas"
[formArrayName]="questionsFormName"

2
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts
View File

@@ -19,6 +19,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { AvvikelseReportFormComponent } from './avvikelse-report-form.component';
import { AvvikelseReportFormService } from './avvikelse-report-form.service';
import { UiSelectModule } from '@ui/select/select.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -37,6 +38,7 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
UiSkeletonModule,
DigiNgFormSelectModule,
UiLoaderModule,
UiSelectModule,
ReportDescriptionListModule,
DigiNgFormInputModule,
DigiNgDialogModule,

114
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html
View File

@@ -38,25 +38,17 @@
id="franvaro-report-form"
>
<div class="franvaro-report-form__form-item">
<digi-ng-form-select
<ui-select
*ngIf="allReasons$ | async as reasons; else loadingRef"
[formControl]="reasonFormControl"
afLabel="Orsak till frånvaro"
afPlaceholder="Välj orsak till frånvaro"
[afSelectItems]="reasons"
[afAnnounceIfOptional]="true"
[afRequired]="true"
[afDisableValidStyle]="true"
[afInvalid]="formControlIsInvalid(['reason'])"
></digi-ng-form-select>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['reason'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.reason"
></digi-ng-form-validation-message>
</div>
uiLabel="Orsak till frånvaro"
uiPlaceholder="Välj orsak till frånvaro"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
[uiInvalid]="formControlIsInvalid(['reason'])"
[uiOptions]="reasons"
[uiValidationMessage]="formErrors.reason"
></ui-select>
</div>
<ng-container *ngIf="reasonFormControl.value">
<div class="franvaro-report-form__form-item" *ngIf="showKnownReasonTextArea">
@@ -81,14 +73,10 @@
afLabel="Dag för frånvaro"
[formControl]="dateFormControl"
></digi-ng-form-datepicker>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['date'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.date"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['date'])"
[uiValidationMessage]="formErrors.date"
></ui-validation-message>
</div>
<div class="franvaro-report-form__form-item">
@@ -108,7 +96,7 @@
</digi-form-fieldset>
</div>
<ng-container *ngIf="showTimePickers">
<div *ngIf="showTimePickers">
<div class="franvaro-report-form__time-pickers">
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
@@ -120,14 +108,10 @@
[afInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['startTime'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.startTime"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['startTime'])"
[uiValidationMessage]="formErrors.startTime"
></ui-validation-message>
</div>
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
@@ -139,25 +123,17 @@
[afInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['endTime'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.endTime"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['endTime'])"
[uiValidationMessage]="formErrors.endTime"
></ui-validation-message>
</div>
</div>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.expectedEndTimeIsBeforeStartTime"
></digi-ng-form-validation-message>
</div>
</ng-container>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.expectedEndTimeIsBeforeStartTime"
></ui-validation-message>
</div>
<div>
<h2>Tiden deltagaren skulle varit närvarande</h2>
@@ -172,14 +148,10 @@
[afInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['expectedPresenceStartTime'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.expectedPresenceStartTime"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceStartTime'])"
[uiValidationMessage]="formErrors.expectedPresenceStartTime"
></ui-validation-message>
</div>
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
@@ -191,24 +163,16 @@
[afInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['expectedPresenceEndTime'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.expectedPresenceEndTime"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTime'])"
[uiValidationMessage]="formErrors.expectedPresenceEndTime"
></ui-validation-message>
</div>
</div>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
></ui-validation-message>
</div>
</ng-container>

6
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.scss
View File

@@ -24,7 +24,7 @@
}
&__time-picker {
flex-grow: 1;
width: 100%;
}
&__footer {
@@ -37,8 +37,4 @@
display: flex;
gap: var(--digi--layout--gutter);
}
&__validation-message {
margin-top: var(--digi--layout--gutter--s);
}
}

8
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts
View File

@@ -1,8 +1,6 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@@ -14,6 +12,8 @@ import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiTextareaModule } from '@ui/textarea/textarea.module';
import { UiSelectModule } from '@ui/select/select.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { FranvaroReportFormComponent } from './franvaro-report-form.component';
@@ -31,13 +31,13 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
UiLoaderModule,
UiBackLinkModule,
ReportDescriptionListModule,
DigiNgFormSelectModule,
DigiNgFormDatepickerModule,
UiSkeletonModule,
UiValidationMessageModule,
DigiNgFormInputModule,
DigiNgFormValidationMessageModule,
DigiNgDialogModule,
UiTextareaModule,
UiSelectModule,
UiRadiobuttonGroupModule,
UiLinkButtonModule,
],

7
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
View File

@@ -73,9 +73,10 @@
></digi-form-checkbox>
</li>
</ul>
<digi-form-validation-message *ngIf="formControlIsInvalid('activityIds')" af-variation="error"
>{{gpFormGroup.errors.activityIds}}</digi-form-validation-message
>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid('activityIds')"
[uiValidationMessage]="gpFormGroup.errors?.activityIds"
></ui-validation-message>
</ng-container>
</digi-form-fieldset>

2
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
View File

@@ -11,6 +11,7 @@ import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { GemensamPlaneringFormComponent } from './gemensam-planering-form.component';
@@ -33,6 +34,7 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
UiSkeletonModule,
DigiNgFormCheckboxModule,
DigiNgDialogModule,
UiValidationMessageModule,
UiLinkButtonModule,
],
providers: [GemensamPlaneringFormService],

22
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
View File

@@ -46,19 +46,17 @@
<span class="msfa__a11y-sr-only"> om kategorierna</span>
</digi-button>
</div>
<digi-ng-form-select
class="informativ-rapport-form__category-select"
<ui-select
[formControl]="categoryFormControl"
afLabel=""
afPlaceholder="Välj kategori"
afId="informativ-rapport-form-category"
[afSelectItems]="categorySelectItems"
[afRequired]="true"
[afAnnounceIfOptional]="true"
[afInvalidMessage]="categoryFormControl.errors?.required"
[afDisableValidStyle]="true"
[afInvalid]="formControlIsInvalid('category')"
></digi-ng-form-select>
uiLabel=""
uiPlaceholder="Välj kategori"
uiId="informativ-rapport-form-category"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
[uiInvalid]="formControlIsInvalid('category')"
[uiOptions]="categorySelectItems"
[uiValidationMessage]="categoryFormControl.errors?.required"
></ui-select>
</div>
<div class="informativ-rapport-form__form-item">
<ui-textarea

10
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.scss
View File

@@ -36,12 +36,6 @@
width: 1.25em;
}
&__category-select {
::ng-deep .digi-ng-form-select__label {
display: none;
}
}
&__footer {
display: flex;
flex-direction: column;
@@ -53,10 +47,6 @@
gap: var(--digi--layout--gutter);
}
&__validation-message {
margin-top: var(--digi--layout--gutter--s);
}
&__percent-range {
max-width: 20rem;
display: block;

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.module.ts
View File

@@ -1,5 +1,4 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@@ -14,6 +13,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { InformativRapportFormComponent } from './informativ-rapport-form.component';
import { InformativRapportFormService } from './informativ-rapport-form.service';
import { UiSelectModule } from '@ui/select/select.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -28,8 +28,8 @@ import { InformativRapportFormService } from './informativ-rapport-form.service'
ReportDescriptionListModule,
UiBackLinkModule,
UiSkeletonModule,
UiSelectModule,
DigiNgDialogModule,
DigiNgFormSelectModule,
UiTextareaModule,
UiLinkButtonModule,
],

44
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
View File

@@ -34,17 +34,15 @@
(ngSubmit)="openConfirmDialog()"
id="periodisk-redovisning-form"
>
<digi-ng-form-select
afLabel="Period"
[afSelectItems]="periodsToFormselectItems(periods)"
[afDisableValidStyle]="true"
[afRequired]="true"
[afAnnounceIfOptional]="true"
<ui-select
uiLabel="Period"
[uiOptions]="periodsToFormselectItems(periods)"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[formControl]="periodFormControl"
[afInvalid]="formControlIsInvalid(periodFormControl)"
(afOnChange)="openChangePeriodDialogIfValuesExist()"
></digi-ng-form-select>
[uiInvalid]="formControlIsInvalid(periodFormControl)"
(uiOnChange)="openChangePeriodDialogIfValuesExist()"
></ui-select>
<div>
<digi-form-fieldset
af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
@@ -102,16 +100,12 @@
<digi-ng-form-checkbox
formControlName="noActivitiesHasBeenConducted"
afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[afInvalid]="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
[afInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
></digi-ng-form-checkbox>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
af-variation="error"
*ngIf="this.shouldValidate$.value && !!formErrors?.activitiesMismatch"
>
{{formErrors?.activitiesMismatch}}
</digi-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
[uiValidationMessage]="formErrors?.activitiesMismatch"
></ui-validation-message>
</div>
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
@@ -151,14 +145,10 @@
[afInvalid]="activityLocationIsInvalid(activityFormGroup)"
afLabel="Utfört på plats"
></digi-ng-form-checkbox>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="activityLocationIsInvalid(activityFormGroup)"
af-variation="error"
>
{{activityFormGroup.errors.locationCheckboxes}}
</digi-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="activityLocationIsInvalid(activityFormGroup)"
[uiValidationMessage]="activityFormGroup.errors?.locationCheckboxes"
></ui-validation-message>
</div>
</div>
</ng-container>

6
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
View File

@@ -1,6 +1,5 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@@ -11,7 +10,9 @@ import { UiInputModule } from '@ui/input/input.module';
import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSelectModule } from '@ui/select/select.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component';
@@ -29,13 +30,14 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
ReportDescriptionListModule,
UiBackLinkModule,
UiLoaderModule,
UiSelectModule,
UiSkeletonModule,
DigiNgDialogModule,
DigiNgFormSelectModule,
DigiNgFormCheckboxModule,
UiRadiobuttonGroupModule,
UiLinkButtonModule,
UiInputModule,
UiValidationMessageModule,
],
providers: [PeriodiskRedovisningFormService],
exports: [PeriodiskRedovisningFormComponent],

12
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html
View File

@@ -67,14 +67,10 @@
[afMinDate]="avrop.startDate"
[afMaxDate]="getMaxDate(avrop.startDate)"
></digi-ng-form-datepicker>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid('startDate')"
class="signal-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.startDate"
></digi-ng-form-validation-message>
</div>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid('startDate')"
[uiValidationMessage]="formErrors.startDate"
></ui-validation-message>
</div>
<footer class="signal-form__footer">

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.scss
View File

@@ -23,10 +23,6 @@
gap: var(--digi--layout--gutter);
}
&__validation-message {
margin-top: var(--digi--layout--gutter--s);
}
&__percent-range {
max-width: 20rem;
display: block;

4
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.ts
View File

@@ -10,9 +10,9 @@ import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
import { add } from 'date-fns';
import { BehaviorSubject, Observable } from 'rxjs';
import { map, shareReplay, switchMap, take } from 'rxjs/operators';
import { SignalFormData, SignalFormKeys, SignalOmfattning, SignalType } from './signal-form.model';
import { SignalFormService } from './signal-form.service';
import { SignalFormValidator } from './signal-form.validator';
import { SignalFormData, SignalFormKeys, SignalOmfattning, SignalType } from './signal-form.model';
@Component({
selector: 'msfa-signal-form',
@@ -64,7 +64,7 @@ export class SignalFormComponent {
convertTypeValueToLabel(type: SignalType): string {
return this.typeSelectItems?.find(selectItem => selectItem.value === type)?.name;
}
convertOmfattningValueToLabel(type: SignalType): string {
convertOmfattningValueToLabel(type: SignalOmfattning): string {
return this.omfattningRadioButtons?.find(radiobuttons => radiobuttons.value === type)?.label;
}

6
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts
View File

@@ -1,6 +1,5 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@@ -10,14 +9,15 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { UiBackLinkModule } from '@ui/back-link/back-link.module';
import { UiInputModule } from '@ui/input/input.module';
import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSelectModule } from '@ui/select/select.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { SignalFormComponent } from './signal-form.component';
import { SignalFormService } from './signal-form.service';
import { UiLoaderModule } from '@ui/loader/loader.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -36,9 +36,9 @@ import { SignalFormService } from './signal-form.service';
UiSelectModule,
UiLoaderModule,
DigiNgDialogModule,
DigiNgFormValidationMessageModule,
ReportDescriptionListModule,
UiInputModule,
UiValidationMessageModule,
UiLinkButtonModule,
],
providers: [SignalFormService],

11
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component.html
View File

@@ -14,13 +14,10 @@
[uiInvalid]="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected"
></ui-checkbox>
</digi-form-fieldset>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected"
af-variation="error"
>{{formGroup?.errors?.atLeastOneSelected}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected"
[uiValidationMessage]="formGroup?.errors?.atLeastOneSelected"
></ui-validation-message>
</div>
<ui-textarea

9
apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html
View File

@@ -32,11 +32,10 @@
[formControl]="endDateFormControl"
></digi-ng-form-datepicker>
</div>
<div aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="showPeriodError" af-variation="error"
>{{formErrors.datesMismatch}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="showPeriodError"
[uiValidationMessage]="formErrors.datesMismatch"
></ui-validation-message>
</div>
<ui-checkbox
[formControl]="includeExportedDeltagareFormControl"

25
apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
View File

@@ -15,21 +15,16 @@
<digi-button *ngIf="!skipSubmit" class="handledare-picker-form__submit" af-type="submit">
{{submitText}}
</digi-button>
<div class="handledare-picker-form__validation-wrapper" aria-atomic="true" role="alert">
<digi-form-validation-message
class="handledare-picker__validation-message"
*ngIf="(handledareFormControl.invalid && handledareFormControl.touched) || invalid"
af-variation="error"
>
Handledare måste väljas för att kunna spara
</digi-form-validation-message>
<digi-form-validation-message
*ngIf="(lastSavedHandledare$ | async) && submitted"
class="handledare-picker__validation-message"
af-variation="success"
>
Vald handledare har uppdaterats
</digi-form-validation-message>
<div class="handledare-picker-form__validation-wrapper">
<ui-validation-message
[uiShowValidationMessage]="(handledareFormControl.invalid && handledareFormControl.touched) || invalid"
uiValidationMessage="Handledare måste väljas för att kunna spara"
></ui-validation-message>
<ui-validation-message
[uiShowValidationMessage]="(lastSavedHandledare$ | async) && submitted"
uiValidationMessageType="success"
uiValidationMessage="Vald handledare har uppdaterats"
></ui-validation-message>
</div>
<ui-loader *ngIf="submitHandledareLoading$ | async" uiSize="s" uiType="absolute"></ui-loader>
</form>

3
apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
View File

@@ -4,11 +4,12 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { HandledarePickerFormComponent } from './handledare-picker-form.component';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [HandledarePickerFormComponent],
imports: [CommonModule, ReactiveFormsModule, UiLoaderModule, DigiNgFormSelectModule],
imports: [CommonModule, ReactiveFormsModule, UiLoaderModule, DigiNgFormSelectModule, UiValidationMessageModule],
exports: [HandledarePickerFormComponent],
})
export class HandledarePickerFormModule {}

10
apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html
View File

@@ -18,11 +18,9 @@
<digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button>
<digi-form-validation-message
<ui-validation-message
class="organization-picker-form__error"
af-variation="error"
*ngIf="organizationFormControl.invalid && organizationFormControl.touched"
>
Du måste välja en organisation för att kunna logga in
</digi-form-validation-message>
[uiShowValidationMessage]="organizationFormControl.invalid && organizationFormControl.touched"
uiValidationMessage="Du måste välja en organisation för att kunna logga in"
></ui-validation-message>
</form>

3
apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts
View File

@@ -2,12 +2,13 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
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 { OrganizationPickerFormComponent } from './organization-picker-form.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [OrganizationPickerFormComponent],
imports: [CommonModule, ReactiveFormsModule, DigiNgFormSelectModule],
imports: [CommonModule, ReactiveFormsModule, DigiNgFormSelectModule, UiValidationMessageModule],
exports: [OrganizationPickerFormComponent],
})
export class OrganizationPickerFormModule {}

5
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
View File

@@ -38,7 +38,10 @@
<div aria-atomic="true" role="alert">
<ul class="tree-nodes-selector__validation-messages" *ngIf="showValidation && validationMessages">
<li *ngFor="let validationMessage of validationMessages">
<digi-form-validation-message af-variation="error"> {{validationMessage}} </digi-form-validation-message>
<ui-validation-message
[uiShowValidationMessage]="true"
[uiValidationMessage]="validationMessage"
></ui-validation-message>
</li>
</ul>
</div>

9
libs/ui/src/checkbox/checkbox.component.html
View File

@@ -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>

3
libs/ui/src/checkbox/checkbox.module.ts
View File

@@ -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],
})

9
libs/ui/src/input/input.component.html
View File

@@ -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>

3
libs/ui/src/input/input.module.ts
View File

@@ -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],
})

9
libs/ui/src/radiobutton-group/radiobutton-group.component.html
View File

@@ -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>

2
libs/ui/src/radiobutton-group/radiobutton-group.component.ts
View File

@@ -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';

3
libs/ui/src/radiobutton-group/radiobutton-group.module.ts
View File

@@ -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],
})

9
libs/ui/src/select/select.component.html
View File

@@ -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>

3
libs/ui/src/select/select.module.ts
View File

@@ -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],
})

9
libs/ui/src/textarea/textarea.component.html
View File

@@ -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>

3
libs/ui/src/textarea/textarea.module.ts
View File

@@ -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],
})

5
libs/ui/src/validation-message/validation-message-type.enum.ts Normal file
View File

@@ -0,0 +1,5 @@
export enum UiValidationMessageType {
SUCCESS = 'success',
ERROR = 'error',
WARNING = 'warning'
}

5
libs/ui/src/validation-message/validation-message.component.html Normal file
View File

@@ -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
libs/ui/src/validation-message/validation-message.component.scss Normal file
View File

25
libs/ui/src/validation-message/validation-message.component.spec.ts Normal file
View File

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

14
libs/ui/src/validation-message/validation-message.component.ts Normal file
View File

@@ -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
View 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 {}