Marcelsche Änderungen. (#288)

src/app/base-components/base-components.component.html

@@ -101,20 +101,21 @@ <h2>Buttons - Text only</h2>
 <div class="componentContainer">
   <h2>Textinput</h2>
   <design-text-input
+    [formControl]="controlWithValidator"
     class="component"
     flavor="primary"
     [hintColored]="true"
     [label]="'Label'"
     [placeholder]="'Primary field'"
-    [hintText]="'A colored hint.'"
+    [hintText]="getValidatorHintText()"
     (keydown.enter)="changedText($event)">
   </design-text-input>
   <design-text-input
+    [formControl]="control"
     class="component"
     [label]="'Label'"
     [placeholder]="'Disabled'"
-    [hintText]="'A hint.'"
-    [disabled]="true">
+    [hintText]="'A hint.'">
   </design-text-input>
   <design-text-input
     class="component"

src/app/base-components/base-components.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-base-components',
@@ -7,6 +8,9 @@ import {Component} from '@angular/core';
 })
 export class BaseComponentsComponent {
 
+  control: FormControl = new FormControl({value: 0, disabled: true}, [Validators.required]);
+  controlWithValidator: FormControl = new FormControl(0, [Validators.required]);
+
   pressedAlert(name: string) {
     alert(name + " was pressed!");
   }
@@ -15,4 +19,11 @@ export class BaseComponentsComponent {
     console.log(event)
     alert("Text changed! Text: " + event.target.value);
   }
+
+  getValidatorHintText() {
+    if (this.controlWithValidator.errors?.['required']) {
+      return "Value is required";
+    }
+    return "";
+  }
 }

src/app/base-components/base-components.module.ts

@@ -7,19 +7,21 @@ import {ButtonModule} from "../../core/components/buttons/button/button.module";
 import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module";
 import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
 import {TextInputModule} from "../../core/components/inputs/text-input/text-input.module";
+import {ReactiveFormsModule} from "@angular/forms";
 
 
 @NgModule({
   declarations: [
     BaseComponentsComponent
   ],
-  imports: [
-    CommonModule,
-    BaseComponentsRoutingModule,
-    ButtonModule,
-    ButtonOutlineModule,
-    ButtonTextModule,
-    TextInputModule
-  ]
+    imports: [
+        CommonModule,
+        BaseComponentsRoutingModule,
+        ButtonModule,
+        ButtonOutlineModule,
+        ButtonTextModule,
+        TextInputModule,
+        ReactiveFormsModule
+    ]
 })
 export class BaseComponentsModule { }

src/core/components/inputs/text-input/text-input.component.html

@@ -1,8 +1,12 @@
 <label for="inputElement">{{label}}</label>
 <input id="inputElement" type="text"
-     [placeholder]="placeholder"
-     (keydown.enter)="onEnter.emit()"
-     [class]="flavor"
-     [disabled]="disabled">
+       [placeholder]="placeholder"
+       (keydown.enter)="onEnter.emit()"
+       [class]="flavor"
+       [disabled]="disabled"
+       (input)="onInput($event.target)"
+       (blur)="onTouched?.()"
+       (compositionstart)="compositionStart()"
+       (compositionend)="compositionEnd($event.target)">
 <small [className]="getLabelColor()">{{hintText}}</small>
-
+<ng-content></ng-content>

src/core/components/inputs/text-input/text-input.component.ts

@@ -1,30 +1,96 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
+import {ɵgetDOM as getDOM} from '@angular/common';
 
 export type Flavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 
+/**
+ * We must check whether the agent is Android because composition events
+ * behave differently between iOS and Android.
+ */
+function isAndroid(): boolean {
+  const userAgent = getDOM() ? getDOM().getUserAgent() : '';
+  return /android (\d+)/.test(userAgent.toLowerCase());
+}
 
 @Component({
   selector: 'design-text-input',
   templateUrl: './text-input.component.html',
-  styleUrls: ['./text-input.component.scss']
+  styleUrls: ['./text-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: TextInputComponent
+    }
+  ]
 })
-export class TextInputComponent {
+export class TextInputComponent implements ControlValueAccessor {
 
-  @Input() public disabled = false;
+  public disabled = false;
   @Input() placeholder: string = "";
   @Input() hintText: string = "";
   @Input() label: string = "";
   @Input() hintColored: boolean = false;
   @Input() public flavor: Flavor = 'primary';
+  @ViewChild(HTMLInputElement) private input?: HTMLInputElement;
 
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() public onEnter = new EventEmitter<InputEvent>();
+  onChanged: ((_: any) => void) | null = null;
+  onTouched: (() => void) | null = null;
+  composing: boolean = false;
+
+  private readonly compositionMode: boolean | null;
+
+  constructor() {
+    if (this.compositionMode === null) {
+      this.compositionMode = !isAndroid();
+    }
+  }
+
+  writeValue(obj: any): void {
+    if(this.input) {
+      this.input.value = obj
+    }
+  }
+
+  registerOnChange(fn: (_: any) => void): void {
+    this.onChanged = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
 
   getLabelColor() {
-    if(this.hintColored && !this.disabled && this.flavor != "primary"){
+    if (this.hintColored && !this.disabled && this.flavor != "primary") {
       return this.flavor;
     } else {
       return "";
     }
   }
+
+  onInput(target: EventTarget | null) {
+    if (!this.compositionMode || (this.compositionMode && !this.composing)) {
+      // @ts-ignore
+      this.onChanged?.(target.value)
+    }
+  }
+
+  compositionStart() {
+    this.composing = true;
+  }
+
+  compositionEnd(target: EventTarget | null) {
+    this.composing = false;
+    if (this.compositionMode) {
+      // @ts-ignore
+      this.onChanged?.(target.value);
+    }
+  }
 }