/
text-value-as-string.component.ts
121 lines (87 loc) · 3.71 KB
/
text-value-as-string.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { ValueErrorStateMatcher } from '../../value-error-state-matcher';
import { CreateTextValueAsString, ReadTextValueAsString, UpdateTextValueAsString } from '@dasch-swiss/dsp-js';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { BaseValueDirective } from 'src/app/main/directive/base-value.directive';
// https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
const resolvedPromise = Promise.resolve(null);
@Component({
selector: 'app-text-value-as-string',
templateUrl: './text-value-as-string.component.html',
styleUrls: ['./text-value-as-string.component.scss']
})
export class TextValueAsStringComponent extends BaseValueDirective implements OnInit, OnChanges, OnDestroy {
@Input() displayValue?: ReadTextValueAsString;
@Input() textArea?: false;
valueFormControl: FormControl;
commentFormControl: FormControl;
form: FormGroup;
valueChangesSubscription: Subscription;
matcher = new ValueErrorStateMatcher();
customValidators = [];
constructor(@Inject(FormBuilder) private _fb: FormBuilder) {
super();
}
getInitValue(): string | null {
if (this.displayValue !== undefined) {
return this.displayValue.text;
} else {
return null;
}
}
ngOnInit() {
// initialize form control elements
this.valueFormControl = new FormControl(null);
this.commentFormControl = new FormControl(null);
this.valueChangesSubscription = this.commentFormControl.valueChanges.subscribe(
data => {
this.valueFormControl.updateValueAndValidity();
}
);
this.form = this._fb.group({
value: this.valueFormControl,
comment: this.commentFormControl
});
this.resetFormControl();
resolvedPromise.then(() => {
// add form to the parent form group
this.addToParentFormGroup(this.formName, this.form);
});
}
ngOnChanges(changes: SimpleChanges): void {
// resets values and validators in form controls when input displayValue or mode changes
// at the first call of ngOnChanges, form control elements are not initialized yet
this.resetFormControl();
}
ngOnDestroy(): void {
this.unsubscribeFromValueChanges();
resolvedPromise.then(() => {
// remove form from the parent form group
this.removeFromParentFormGroup(this.formName);
});
}
getNewValue(): CreateTextValueAsString | false {
if (this.mode !== 'create' || !this.form.valid || this.isEmptyVal()) {
return false;
}
const newTextValue = new CreateTextValueAsString();
newTextValue.text = this.valueFormControl.value;
if (this.commentFormControl.value !== null && this.commentFormControl.value !== '') {
newTextValue.valueHasComment = this.commentFormControl.value;
}
return newTextValue;
}
getUpdatedValue(): UpdateTextValueAsString | false {
if (this.mode !== 'update' || !this.form.valid) {
return false;
}
const updatedTextValue = new UpdateTextValueAsString();
updatedTextValue.id = this.displayValue.id;
updatedTextValue.text = this.valueFormControl.value;
if (this.commentFormControl.value !== null && this.commentFormControl.value !== '') {
updatedTextValue.valueHasComment = this.commentFormControl.value;
}
return updatedTextValue;
}
}