[player] Show validation errors of toggle button

projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts

@@ -5,11 +5,15 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
 @Component({
   selector: 'aspect-toggle-button',
   template: `
-    <mat-button-toggle-group [formControl]="elementFormControl"
+    <mat-button-toggle-group [class.errors]="elementFormControl.errors && elementFormControl.touched"
+                             [formControl]="elementFormControl"
                              [isDisabled]="elementModel.readOnly"
                              [value]="elementModel.value"
                              [vertical]="elementModel.verticalOrientation"
-                             [style.width]="elementModel.dynamicWidth ? 'unset' : '100%'">
+                             [style.width]="elementModel.dynamicWidth ? 'unset' : '100%'"
+                             [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
+                                           (elementFormControl.errors | errorTransform: elementModel) : ''"
+                             (focusout)="elementFormControl.markAsTouched()">
       <mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
                          [value]="i"
                          [ngClass]="{ 'strike-other-options' : elementModel.strikeOtherOptions,
@@ -30,6 +34,9 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
     </mat-button-toggle-group>
   `,
   styles: [
+    '.errors {border: 2px solid #f44336 !important;}',
+    '::ng-deep .mat-tooltip {border: 1px solid #f44336; margin-top: 8px !important;}',
+    '::ng-deep .mat-tooltip {background-color: white; color: #f44336 !important;}',
     'mat-button-toggle-group {display: inline-flex; min-width: 70px; min-height: 20px; max-width: 100%;}',
     'mat-button-toggle-group {justify-content: center;}',
     ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}',