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
|
import { Component, OnInit } from '@angular/core';
import { FormControl, ValidatorFn, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import _ from 'lodash';
import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
import { CdFormModalFieldConfig } from '~/app/shared/models/cd-form-modal-field-config';
import { DimlessBinaryPipe } from '~/app/shared/pipes/dimless-binary.pipe';
import { FormatterService } from '~/app/shared/services/formatter.service';
@Component({
selector: 'cd-form-modal',
templateUrl: './form-modal.component.html',
styleUrls: ['./form-modal.component.scss']
})
export class FormModalComponent implements OnInit {
// Input
titleText: string;
message: string;
fields: CdFormModalFieldConfig[];
submitButtonText: string;
onSubmit: Function;
// Internal
formGroup: CdFormGroup;
constructor(
public activeModal: NgbActiveModal,
private formBuilder: CdFormBuilder,
private formatter: FormatterService,
private dimlessBinaryPipe: DimlessBinaryPipe
) {}
ngOnInit() {
this.createForm();
}
createForm() {
const controlsConfig: Record<string, FormControl> = {};
this.fields.forEach((field) => {
controlsConfig[field.name] = this.createFormControl(field);
});
this.formGroup = this.formBuilder.group(controlsConfig);
}
private createFormControl(field: CdFormModalFieldConfig): FormControl {
let validators: ValidatorFn[] = [];
if (_.isBoolean(field.required) && field.required) {
validators.push(Validators.required);
}
if (field.validators) {
validators = validators.concat(field.validators);
}
return new FormControl(
_.defaultTo(
field.type === 'binary' ? this.dimlessBinaryPipe.transform(field.value) : field.value,
null
),
{ validators }
);
}
getError(field: CdFormModalFieldConfig): string {
const formErrors = this.formGroup.get(field.name).errors;
const errors = Object.keys(formErrors).map((key) => {
return this.getErrorMessage(key, formErrors[key], field.errors);
});
return errors.join('<br>');
}
private getErrorMessage(
error: string,
errorContext: any,
fieldErrors: { [error: string]: string }
): string {
if (fieldErrors) {
const customError = fieldErrors[error];
if (customError) {
return customError;
}
}
if (['binaryMin', 'binaryMax'].includes(error)) {
// binaryMin and binaryMax return a function that take I18n to
// provide a translated error message.
return errorContext();
}
if (error === 'required') {
return $localize`This field is required.`;
}
return $localize`An error occurred.`;
}
onSubmitForm(values: any) {
const binaries = this.fields
.filter((field) => field.type === 'binary')
.map((field) => field.name);
binaries.forEach((key) => {
const value = values[key];
if (value) {
values[key] = this.formatter.toBytes(value);
}
});
this.activeModal.close();
if (_.isFunction(this.onSubmit)) {
this.onSubmit(values);
}
}
}
|
