diff --git a/src/app/features/file/edit-photo/edit-photo.component.html b/src/app/features/file/edit-photo/edit-photo.component.html index ffc4f48d04..bce305a100 100644 --- a/src/app/features/file/edit-photo/edit-photo.component.html +++ b/src/app/features/file/edit-photo/edit-photo.component.html @@ -1,41 +1,52 @@ -Image +
+ Image -
- - - - + + + + - + +
+ @if (formControl.invalid && formControl.touched) { + + + + }
diff --git a/src/app/features/file/edit-photo/edit-photo.component.scss b/src/app/features/file/edit-photo/edit-photo.component.scss index 3d36c54dd6..bc124460ea 100644 --- a/src/app/features/file/edit-photo/edit-photo.component.scss +++ b/src/app/features/file/edit-photo/edit-photo.component.scss @@ -1,3 +1,5 @@ +@use "variables/colors"; + :host { display: flex; flex-direction: column; @@ -23,3 +25,6 @@ margin: auto; color: rgba(0, 0, 0, 0.6); } +.img-label.invalid { + color: colors.$error; +} diff --git a/src/app/features/file/edit-photo/edit-photo.component.ts b/src/app/features/file/edit-photo/edit-photo.component.ts index 9322fd9d84..f86a410661 100644 --- a/src/app/features/file/edit-photo/edit-photo.component.ts +++ b/src/app/features/file/edit-photo/edit-photo.component.ts @@ -1,6 +1,6 @@ import { Component, Inject, OnInit } from "@angular/core"; import { DynamicComponent } from "../../../core/config/dynamic-components/dynamic-component.decorator"; -import { NgIf } from "@angular/common"; +import { NgClass, NgIf } from "@angular/common"; import { MatTooltipModule } from "@angular/material/tooltip"; import { FontAwesomeModule } from "@fortawesome/angular-fontawesome"; import { EditFileComponent } from "../edit-file/edit-file.component"; @@ -13,7 +13,8 @@ import { resizeImage } from "../file-utils"; import { MatDialog } from "@angular/material/dialog"; import { ImagePopupComponent } from "./image-popup/image-popup.component"; import { NAVIGATOR_TOKEN } from "../../../utils/di-tokens"; -import { MatHint } from "@angular/material/form-field"; +import { MatError, MatHint } from "@angular/material/form-field"; +import { ErrorHintComponent } from "app/core/common-components/error-hint/error-hint.component"; @DynamicComponent("EditPhoto") @Component({ @@ -26,6 +27,9 @@ import { MatHint } from "@angular/material/form-field"; FontAwesomeModule, NgIf, MatHint, + ErrorHintComponent, + MatError, + NgClass, ], standalone: true, })