fix: EDITOR-363

now using disabled prop of FormControl
entrecode · May 24, 2019 · 80eecab · 80eecab
1 parent 62162b7
commit 80eecab
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 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
@@ -1,61 +1,109 @@
 <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>
 
   <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>
 
   <div *ngSwitchDefault>
     <ec-output [field]="field" [item]="item"></ec-output>
   </div>
   <ec-input-errors [control]="group.get(field.property)"></ec-input-errors>
-</div>
+</div>
diff --git 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);
   }