Skip to content

Commit 80eecab

Browse files
felixroosfelixroos
committed
fix: EDITOR-363
now using disabled prop of FormControl
1 parent 62162b7 commit 80eecab

File tree

2 files changed

+86
-32
lines changed

2 files changed

+86
-32
lines changed

‎packages/ui/src/lib/form/default-input/default-input.component.html‎

Lines changed: 78 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,109 @@
11
<div [ngSwitch]="field.getView('form')" *ngIf="group" [formGroup]="group">
2-
<input [id]="field.id" *ngSwitchCase="'string'" type="text" [formControl]="control"
3-
[placeholder]="field.getPlaceholder()" [readonly]="formService.isReadOnly(field, item)" class="input"
4-
[ecFocus]="focusEvent" />
2+
<input
3+
[id]="field.id"
4+
*ngSwitchCase="'string'"
5+
type="text"
6+
[formControl]="control"
7+
[placeholder]="field.getPlaceholder()"
8+
class="input"
9+
[ecFocus]="focusEvent"
10+
/>
511

6-
<textarea [id]="field.id" *ngSwitchCase="'textarea'" type="text" [formControl]="control"
7-
[placeholder]="field.getPlaceholder()" [readonly]="formService.isReadOnly(field, item)" class="input"
8-
[ecFocus]="focusEvent"></textarea>
12+
<textarea
13+
[id]="field.id"
14+
*ngSwitchCase="'textarea'"
15+
type="text"
16+
[formControl]="control"
17+
[placeholder]="field.getPlaceholder()"
18+
class="input"
19+
[ecFocus]="focusEvent"
20+
></textarea>
921

10-
<input [id]="field.id" *ngSwitchCase="'number'" type="number" [formControl]="control"
11-
[placeholder]="field.getPlaceholder()" [readonly]="formService.isReadOnly(field, item)" class="input"
12-
[ecFocus]="focusEvent">
22+
<input
23+
[id]="field.id"
24+
*ngSwitchCase="'number'"
25+
type="number"
26+
[formControl]="control"
27+
[placeholder]="field.getPlaceholder()"
28+
class="input"
29+
[ecFocus]="focusEvent"
30+
/>
1331

1432
<div class="ec-input_color" *ngSwitchCase="'color'">
1533
<label [style.backgroundColor]="control.value">
16-
<input [id]="field.id" type="color" [formControl]="control" [readonly]="formService.isReadOnly(field, item)">
34+
<input [id]="field.id" type="color" [formControl]="control" />
1735
</label>
1836
</div>
1937

2038
<label *ngSwitchCase="'boolean'">
21-
<input [id]="field.id" type="checkbox" [formControl]="control" [attr.disabled]="formService.isReadOnly(field, item)?'disabled':'false'">
22-
{{field.placeholder}}
39+
<input [id]="field.id" type="checkbox" [formControl]="control" />
40+
{{ field.placeholder }}
2341
</label>
2442

25-
<input [id]="field.id" *ngSwitchCase="'email'" type="email" [formControl]="control"
26-
[readonly]="formService.isReadOnly(field, item)" [placeholder]="field.getPlaceholder()" class="input"
27-
[ecFocus]="focusEvent">
43+
<input
44+
[id]="field.id"
45+
*ngSwitchCase="'email'"
46+
type="email"
47+
[formControl]="control"
48+
[placeholder]="field.getPlaceholder()"
49+
class="input"
50+
[ecFocus]="focusEvent"
51+
/>
2852

29-
<input [id]="field.id" *ngSwitchCase="'url'" type="url" [formControl]="control" [placeholder]="field.getPlaceholder()"
30-
class="input" [ecFocus]="focusEvent" [readonly]="formService.isReadOnly(field, item)">
53+
<input
54+
[id]="field.id"
55+
*ngSwitchCase="'url'"
56+
type="url"
57+
[formControl]="control"
58+
[placeholder]="field.getPlaceholder()"
59+
class="input"
60+
[ecFocus]="focusEvent"
61+
/>
3162

3263
<ec-toggle [id]="field.id" *ngSwitchCase="'toggle'" [formControl]="control" [placeholder]="field.getPlaceholder()">
3364
</ec-toggle>
3465

3566
<ec-datetime *ngSwitchCase="'date'" [formControl]="control" [placeholder]="field.getPlaceholder()"></ec-datetime>
3667

3768
<div *ngSwitchCase="'select'">
38-
<select [id]="field.id" [formControl]="control" [ecFocus]="focusEvent"
39-
(change)="control.patchValue($event.target.value)" class="input" *ngIf="!formService.isReadOnly(field, item)">
40-
<option>{{field.getPlaceholder()}}</option>
41-
<option *ngFor="let option of field.values" [selected]="control.value===(option.value?option.value:option)"
42-
[value]="option.value?option.value:option">
43-
{{option.label?option.label:option}}
69+
<select
70+
[id]="field.id"
71+
[formControl]="control"
72+
[ecFocus]="focusEvent"
73+
(change)="control.patchValue($event.target.value)"
74+
class="input"
75+
*ngIf="!formService.isReadOnly(field, item)"
76+
>
77+
<option>{{ field.getPlaceholder() }}</option>
78+
<option
79+
*ngFor="let option of field.values"
80+
[selected]="control.value === (option.value ? option.value : option)"
81+
[value]="option.value ? option.value : option"
82+
>
83+
{{ option.label ? option.label : option }}
4484
</option>
4585
</select>
46-
<input type="text" [formControl]="control" [id]="field.id" class="input" readonly
47-
*ngIf="formService.isReadOnly(field, item)">
86+
<input
87+
type="text"
88+
[formControl]="control"
89+
[id]="field.id"
90+
class="input"
91+
/>
4892
</div>
4993
<div *ngSwitchCase="'copy'">
50-
<div *ngIf="!!item?.display(field.property)" class="tag" style="cursor: pointer"
51-
(click)="keycommands.copyToClipBoard(item?.transform('copy', field.property),field.getLabel())"
52-
[attr.data-tooltip-bottom]="'click to copy '+field.getLabel()">
53-
{{item?.display(field.property)}}
94+
<div
95+
*ngIf="!!item?.display(field.property)"
96+
class="tag"
97+
style="cursor: pointer"
98+
(click)="keycommands.copyToClipBoard(item?.transform('copy', field.property), field.getLabel())"
99+
[attr.data-tooltip-bottom]="'click to copy ' + field.getLabel()"
100+
>
101+
{{ item?.display(field.property) }}
54102
</div>
55103
</div>
56104

57105
<div *ngSwitchDefault>
58106
<ec-output [field]="field" [item]="item"></ec-output>
59107
</div>
60108
<ec-input-errors [control]="group.get(field.property)"></ec-input-errors>
61-
</div>
109+
</div>

‎packages/ui/src/lib/form/form.service.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@ export class FormService {
2828
.filter((field) => this.shouldBePartOfForm(field, form))
2929
.forEach((field) => {
3030
const validators = this.getValidators(field);
31-
controls[field.property] = new FormControl(form.getValue(field.property), validators);
31+
controls[field.property] = new FormControl(
32+
{
33+
value: form.getValue(field.property),
34+
disabled: this.isReadOnly(field, form),
35+
},
36+
validators,
37+
);
3238
// TODO use { updateOn: blur } when updating to angular 5.0.0
3339
// see https://github.com/angular/angular/commit/333a708bb632d4258ecb5fd4a0e86229fe9d26e4
3440
});
@@ -39,7 +45,7 @@ export class FormService {
3945
public addField(field: Field, form: Form<any>, group: FormGroup) {
4046
console.warn('addField is experimental!');
4147
const validators = this.getValidators(field);
42-
const control = new FormControl(form.getValue(field.property), validators);
48+
const control = new FormControl({ value: form.getValue(field.property) }, validators);
4349
group.addControl(field.property, control);
4450
}
4551

0 commit comments

Comments
 (0)