Skip to content
Snippets Groups Projects
Commit 8aa6e5a9 authored by OZGCloud's avatar OZGCloud
Browse files

OZG-5789 Use material required props

parent 4d53c0b9
No related branches found
No related tags found
No related merge requests found
Showing
with 13 additions and 24 deletions
...@@ -41,6 +41,7 @@ type TextInputVariants = VariantProps<typeof textInputVariants>; ...@@ -41,6 +41,7 @@ type TextInputVariants = VariantProps<typeof textInputVariants>;
[ngClass]="textInputVariants({ variant })" [ngClass]="textInputVariants({ variant })"
[placeholder]="placeholder" [placeholder]="placeholder"
[autocomplete]="autocomplete" [autocomplete]="autocomplete"
[attr.aria-required]="required"
/> />
</div> </div>
<ng-content select="[error]"></ng-content> <ng-content select="[error]"></ng-content>
......
...@@ -39,6 +39,7 @@ type TextareaVariants = VariantProps<typeof textareaVariants>; ...@@ -39,6 +39,7 @@ type TextareaVariants = VariantProps<typeof textareaVariants>;
[ngClass]="textareaVariants({ variant })" [ngClass]="textareaVariants({ variant })"
[placeholder]="placeholder" [placeholder]="placeholder"
[autocomplete]="autocomplete" [autocomplete]="autocomplete"
[attr.aria-required]="required"
></textarea> ></textarea>
<ng-content select="[error]"></ng-content> <ng-content select="[error]"></ng-content>
</div> </div>
......
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
[formControlName]="formServiceClass.FIELD_EMAIL" [formControlName]="formServiceClass.FIELD_EMAIL"
autocomplete="email" autocomplete="email"
placeholder="E-Mail Adresse" placeholder="E-Mail Adresse"
[required]="true"
> >
</ozgcloud-text-editor> </ozgcloud-text-editor>
...@@ -36,6 +37,7 @@ ...@@ -36,6 +37,7 @@
label="Passwort" label="Passwort"
[formControlName]="formServiceClass.FIELD_PASSWORD" [formControlName]="formServiceClass.FIELD_PASSWORD"
placeholder="Passwort für die Verschlüsselung" placeholder="Passwort für die Verschlüsselung"
[required]="true"
> >
</ozgcloud-text-editor> </ozgcloud-text-editor>
......
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
<input <input
#autocompleteInput #autocompleteInput
[attr.data-test-id]="(label | convertForDataTest) + '-autocomplete-input'" [attr.data-test-id]="(label | convertForDataTest) + '-autocomplete-input'"
[required]="required"
type="text" type="text"
matInput matInput
[matAutocomplete]="auto" [matAutocomplete]="auto"
......
...@@ -45,6 +45,7 @@ export class AutocompleteEditorComponent ...@@ -45,6 +45,7 @@ export class AutocompleteEditorComponent
{ {
@Input() label: string; @Input() label: string;
@Input() values: Selectable[] = []; @Input() values: Selectable[] = [];
@Input() required: boolean = false;
@Output() onKeyUp: EventEmitter<void> = new EventEmitter(); @Output() onKeyUp: EventEmitter<void> = new EventEmitter();
@Output() onOptionSelected: EventEmitter<Selectable> = new EventEmitter(); @Output() onOptionSelected: EventEmitter<Selectable> = new EventEmitter();
......
...@@ -24,19 +24,13 @@ ...@@ -24,19 +24,13 @@
--> -->
<mat-form-field> <mat-form-field>
<mat-label <mat-label>{{ label }}</mat-label>
>{{ label
}}<ng-container *ngIf="required">
<i aria-hidden="true">*</i>
<i class="sr-only">(erforderlich)</i>
</ng-container>
</mat-label>
<input <input
matInput matInput
[matDatepicker]="picker" [matDatepicker]="picker"
[formControl]="fieldControl" [formControl]="fieldControl"
(blur)="touch()" (blur)="touch()"
[attr.aria-required]="required" [required]="required"
[attr.data-test-id]="(label | convertForDataTest) + '-date-input'" [attr.data-test-id]="(label | convertForDataTest) + '-date-input'"
(dateInput)="inputEvent($event)" (dateInput)="inputEvent($event)"
(blur)="onBlur()" (blur)="onBlur()"
......
...@@ -29,13 +29,7 @@ ...@@ -29,13 +29,7 @@
appearance="{{ appearance }}" appearance="{{ appearance }}"
[floatLabel]="readOnly || autoFocus ? 'always' : 'auto'" [floatLabel]="readOnly || autoFocus ? 'always' : 'auto'"
> >
<mat-label <mat-label>{{ label }}</mat-label>
>{{ label
}}<ng-container *ngIf="required">
<i aria-hidden="true">*</i>
<i class="sr-only">(erforderlich)</i>
</ng-container>
</mat-label>
<div class="wrapper"> <div class="wrapper">
<input <input
#inputElement #inputElement
...@@ -45,7 +39,7 @@ ...@@ -45,7 +39,7 @@
[autocomplete]="autocomplete" [autocomplete]="autocomplete"
[readonly]="readOnly" [readonly]="readOnly"
(blur)="touch()" (blur)="touch()"
[attr.aria-required]="required" [required]="required"
[attr.data-test-id]="(label | convertForDataTest) + '-text-input'" [attr.data-test-id]="(label | convertForDataTest) + '-text-input'"
[class.with-clear-button]="showClearButton$ | async" [class.with-clear-button]="showClearButton$ | async"
/> />
......
...@@ -24,13 +24,7 @@ ...@@ -24,13 +24,7 @@
--> -->
<mat-form-field [appearance]="appearance" [floatLabel]="autoFocus ? 'always' : 'auto'"> <mat-form-field [appearance]="appearance" [floatLabel]="autoFocus ? 'always' : 'auto'">
<mat-label <mat-label>{{ label }}</mat-label>
>{{ label
}}<ng-container *ngIf="required">
<i aria-hidden="true">*</i>
<i class="sr-only">(erforderlich)</i>
</ng-container>
</mat-label>
<textarea <textarea
#autosize="cdkTextareaAutosize" #autosize="cdkTextareaAutosize"
...@@ -38,7 +32,7 @@ ...@@ -38,7 +32,7 @@
matInput matInput
cdkTextareaAutosize cdkTextareaAutosize
[formControl]="fieldControl" [formControl]="fieldControl"
[attr.aria-required]="required" [required]="required"
[attr.data-test-id]="(label | convertForDataTest) + '-textarea-input'" [attr.data-test-id]="(label | convertForDataTest) + '-textarea-input'"
(blur)="touch()" (blur)="touch()"
></textarea> ></textarea>
......
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
<ozgcloud-autocomplete-editor <ozgcloud-autocomplete-editor
data-test-id="user-search" data-test-id="user-search"
label="Bearbeiter" label="Bearbeiter"
[required]="true"
[formControlName]="formServiceClass.SEARCH_FIELD" [formControlName]="formServiceClass.SEARCH_FIELD"
[values]="searchedUserProfiles.resource" [values]="searchedUserProfiles.resource"
(onKeyUp)="onKeyUp()" (onKeyUp)="onKeyUp()"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment