From 80eecab5d272f42135cbab2eccbcab3a515f906c Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Fri, 24 May 2019 09:12:04 +0200
Subject: [PATCH] fix: EDITOR-363 now using disabled prop of FormControl

---
 .../default-input.component.html              | 108 +++++++++++++-----
 packages/ui/src/lib/form/form.service.ts      |  10 +-
 2 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/lib/form/default-input/default-input.component.html b/packages/ui/src/lib/form/default-input/default-input.component.html
index 15c4c3c82..23cb83902 100644
--- a/packages/ui/src/lib/form/default-input/default-input.component.html
+++ b/packages/ui/src/lib/form/default-input/default-input.component.html
@@ -1,33 +1,64 @@
 <div [ngSwitch]="field.getView('form')" *ngIf="group" [formGroup]="group">
-  <input [id]="field.id" *ngSwitchCase="'string'" type="text" [formControl]="control"
-    [placeholder]="field.getPlaceholder()" [readonly]="formService.isReadOnly(field, item)" class="input"
-    [ecFocus]="focusEvent" />
+  <input
+    [id]="field.id"
+    *ngSwitchCase="'string'"
+    type="text"
+    [formControl]="control"
+    [placeholder]="field.getPlaceholder()"
+    class="input"
+    [ecFocus]="focusEvent"
+  />
 
-  <textarea [id]="field.id" *ngSwitchCase="'textarea'" type="text" [formControl]="control"
-    [placeholder]="field.getPlaceholder()" [readonly]="formService.isReadOnly(field, item)" class="input"
-    [ecFocus]="focusEvent"></textarea>
+  <textarea
+    [id]="field.id"
+    *ngSwitchCase="'textarea'"
+    type="text"
+    [formControl]="control"
+    [placeholder]="field.getPlaceholder()"
+    class="input"
+    [ecFocus]="focusEvent"
+  ></textarea>
 
-  <input [id]="field.id" *ngSwitchCase="'number'" type="number" [formControl]="control"
-    [placeholder]="field.getPlaceholder()" [readonly]="formService.isReadOnly(field, item)" class="input"
-    [ecFocus]="focusEvent">
+  <input
+    [id]="field.id"
+    *ngSwitchCase="'number'"
+    type="number"
+    [formControl]="control"
+    [placeholder]="field.getPlaceholder()"
+    class="input"
+    [ecFocus]="focusEvent"
+  />
 
   <div class="ec-input_color" *ngSwitchCase="'color'">
     <label [style.backgroundColor]="control.value">
-      <input [id]="field.id" type="color" [formControl]="control" [readonly]="formService.isReadOnly(field, item)">
+      <input [id]="field.id" type="color" [formControl]="control" />
     </label>
   </div>
 
   <label *ngSwitchCase="'boolean'">
-    <input [id]="field.id" type="checkbox" [formControl]="control" [attr.disabled]="formService.isReadOnly(field, item)?'disabled':'false'">
-    {{field.placeholder}}
+    <input [id]="field.id" type="checkbox" [formControl]="control" />
+    {{ field.placeholder }}
   </label>
 
-  <input [id]="field.id" *ngSwitchCase="'email'" type="email" [formControl]="control"
-    [readonly]="formService.isReadOnly(field, item)" [placeholder]="field.getPlaceholder()" class="input"
-    [ecFocus]="focusEvent">
+  <input
+    [id]="field.id"
+    *ngSwitchCase="'email'"
+    type="email"
+    [formControl]="control"
+    [placeholder]="field.getPlaceholder()"
+    class="input"
+    [ecFocus]="focusEvent"
+  />
 
-  <input [id]="field.id" *ngSwitchCase="'url'" type="url" [formControl]="control" [placeholder]="field.getPlaceholder()"
-    class="input" [ecFocus]="focusEvent" [readonly]="formService.isReadOnly(field, item)">
+  <input
+    [id]="field.id"
+    *ngSwitchCase="'url'"
+    type="url"
+    [formControl]="control"
+    [placeholder]="field.getPlaceholder()"
+    class="input"
+    [ecFocus]="focusEvent"
+  />
 
   <ec-toggle [id]="field.id" *ngSwitchCase="'toggle'" [formControl]="control" [placeholder]="field.getPlaceholder()">
   </ec-toggle>
@@ -35,22 +66,39 @@
   <ec-datetime *ngSwitchCase="'date'" [formControl]="control" [placeholder]="field.getPlaceholder()"></ec-datetime>
 
   <div *ngSwitchCase="'select'">
-    <select [id]="field.id" [formControl]="control" [ecFocus]="focusEvent"
-      (change)="control.patchValue($event.target.value)" class="input" *ngIf="!formService.isReadOnly(field, item)">
-      <option>{{field.getPlaceholder()}}</option>
-      <option *ngFor="let option of field.values" [selected]="control.value===(option.value?option.value:option)"
-        [value]="option.value?option.value:option">
-        {{option.label?option.label:option}}
+    <select
+      [id]="field.id"
+      [formControl]="control"
+      [ecFocus]="focusEvent"
+      (change)="control.patchValue($event.target.value)"
+      class="input"
+      *ngIf="!formService.isReadOnly(field, item)"
+    >
+      <option>{{ field.getPlaceholder() }}</option>
+      <option
+        *ngFor="let option of field.values"
+        [selected]="control.value === (option.value ? option.value : option)"
+        [value]="option.value ? option.value : option"
+      >
+        {{ option.label ? option.label : option }}
       </option>
     </select>
-    <input type="text" [formControl]="control" [id]="field.id" class="input" readonly
-      *ngIf="formService.isReadOnly(field, item)">
+    <input
+      type="text"
+      [formControl]="control"
+      [id]="field.id"
+      class="input"
+    />
   </div>
   <div *ngSwitchCase="'copy'">
-    <div *ngIf="!!item?.display(field.property)" class="tag" style="cursor: pointer"
-      (click)="keycommands.copyToClipBoard(item?.transform('copy', field.property),field.getLabel())"
-      [attr.data-tooltip-bottom]="'click to copy '+field.getLabel()">
-      {{item?.display(field.property)}}
+    <div
+      *ngIf="!!item?.display(field.property)"
+      class="tag"
+      style="cursor: pointer"
+      (click)="keycommands.copyToClipBoard(item?.transform('copy', field.property), field.getLabel())"
+      [attr.data-tooltip-bottom]="'click to copy ' + field.getLabel()"
+    >
+      {{ item?.display(field.property) }}
     </div>
   </div>
 
@@ -58,4 +106,4 @@
     <ec-output [field]="field" [item]="item"></ec-output>
   </div>
   <ec-input-errors [control]="group.get(field.property)"></ec-input-errors>
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/ui/src/lib/form/form.service.ts b/packages/ui/src/lib/form/form.service.ts
index 4893636fc..1fd57aa13 100644
--- a/packages/ui/src/lib/form/form.service.ts
+++ b/packages/ui/src/lib/form/form.service.ts
@@ -28,7 +28,13 @@ export class FormService {
       .filter((field) => this.shouldBePartOfForm(field, form))
       .forEach((field) => {
         const validators = this.getValidators(field);
-        controls[field.property] = new FormControl(form.getValue(field.property), validators);
+        controls[field.property] = new FormControl(
+          {
+            value: form.getValue(field.property),
+            disabled: this.isReadOnly(field, form),
+          },
+          validators,
+        );
         // TODO use { updateOn: blur } when updating to angular 5.0.0
         // see https://github.com/angular/angular/commit/333a708bb632d4258ecb5fd4a0e86229fe9d26e4
       });
@@ -39,7 +45,7 @@ export class FormService {
   public addField(field: Field, form: Form<any>, group: FormGroup) {
     console.warn('addField is experimental!');
     const validators = this.getValidators(field);
-    const control = new FormControl(form.getValue(field.property), validators);
+    const control = new FormControl({ value: form.getValue(field.property) }, validators);
     group.addControl(field.property, control);
   }