From 188c87393b5bf0de186eaf6c33fd596047ae3236 Mon Sep 17 00:00:00 2001
From: Daniel Wagner <wagei96@gmx.de>
Date: Mon, 12 Apr 2021 14:40:16 +0200
Subject: [PATCH] add an id to readonly form field

---
 .../readonly-form-field-wrapper.component.html                 | 3 ++-
 .../readonly-form-field-wrapper.component.ts                   | 1 +
 .../readonly-form-field/readonly-form-field.component.html     | 2 ++
 .../readonly-form-field/readonly-form-field.component.ts       | 1 +
 .../read-only-field-wrapper.component.html                     | 2 +-
 .../read-only-field/read-only-field.component.html             | 3 ++-
 6 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.html b/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.html
index 1972554a..d1260073 100644
--- a/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.html
+++ b/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.html
@@ -18,10 +18,11 @@
       [multiline]="multiline"
       [rows]="rows"
       [shrinkIfEmpty]="shrinkIfEmpty"
+      [id]="id"
       matTooltip="{{toolTipText}}"
       matTooltipPosition="right"
       matTooltipClass="custom-tooltip"
       matTooltipDisabled="{{!toolTipForInputEnabled}}">
     </mad-readonly-form-field>
   </ng-container>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts b/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts
index 71466422..14c3df1a 100644
--- a/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts
+++ b/projects/material-addons/src/lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component.ts
@@ -52,6 +52,7 @@ export class ReadOnlyFormFieldWrapperComponent implements OnInit, AfterViewInit,
   @Input('unit') unit: string | null = null;
   @Input('unitPosition') unitPosition: 'right' | 'left' = 'left';
   @Input('errorMessage') errorMessage: string | null = null;
+  @Input() id: string;
 
   /**
    * If set to "false", a readonly input will be rendered.
diff --git a/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.html b/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.html
index 0c96dae7..9956174c 100644
--- a/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.html
+++ b/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.html
@@ -5,6 +5,7 @@
     [ngModel]="value"
     [ngClass]="'text-' + textAlign"
     [errorStateMatcher]="errorMatcher"
+    [id]="id"
     readonly
     matInput
     #inputEl
@@ -16,6 +17,7 @@
     [ngModel]="value"
     class="multiline"
     [errorStateMatcher]="errorMatcher"
+    [id]="id"
     readonly
     matInput
   ></textarea>
diff --git a/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.ts b/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.ts
index eebc028a..3a5014ca 100644
--- a/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.ts
+++ b/projects/material-addons/src/lib/readonly/readonly-form-field/readonly-form-field.component.ts
@@ -36,6 +36,7 @@ export class ReadOnlyFormFieldComponent implements OnChanges, AfterViewChecked {
   @Input('errorMessage') errorMessage: string | null = null;
   @Input() multiline = false;
   @Input() rows = 3;
+  @Input() id: string;
   /*
    * If shrinkIfEmpty is set to "false", nothing changes
    * If set to "true" and multiline is also "true", the textarea will
diff --git a/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.html b/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.html
index 3650f797..b955d210 100644
--- a/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.html
+++ b/src/app/example-components/read-only-field-wrapper/read-only-field-wrapper.component.html
@@ -4,7 +4,7 @@
 </mad-icon-button>
 <mat-checkbox [checked]="textIsEditable" (change)="textIsEditable = !textIsEditable">Text editable</mat-checkbox>
 <br/>
-<mad-readonly-form-field-wrapper [readonly]="!textIsEditable" [value]="demoIdData">
+<mad-readonly-form-field-wrapper [id]="'namex'" [readonly]="!textIsEditable" [value]="demoIdData">
   <mat-form-field class="form-group">
     <mat-label>First Name</mat-label>
     <input [(ngModel)]="demoIdData" autocomplete="off" class="form-control" id="namex" matInput name="id"/>
diff --git a/src/app/example-components/read-only-field/read-only-field.component.html b/src/app/example-components/read-only-field/read-only-field.component.html
index 2da5eddc..b7ba75e0 100644
--- a/src/app/example-components/read-only-field/read-only-field.component.html
+++ b/src/app/example-components/read-only-field/read-only-field.component.html
@@ -1,4 +1,5 @@
-<mad-readonly-form-field [value]="'Jennifer Doe'" [label]="'Last changed by'"></mad-readonly-form-field>
+<mad-readonly-form-field [id]="'lastChangedBy'" [label]="'Last changed by'"
+                         [value]="'Jennifer Doe'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="'2019-08-09' | date" [label]="'Last changed at'"></mad-readonly-form-field>
 <mad-readonly-form-field [label]="'Approved by'"></mad-readonly-form-field>
 <mad-readonly-form-field [value]="123456" [label]="'Long number, not formatted (default)'"></mad-readonly-form-field>