form-field.component.html 19.5 KB
Newer Older
1
2
<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [id]="this.form.get('id').value"
 [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle" class="dynamic-form-field row">
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
3

Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
4
	<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
5
	<mat-icon *ngIf="this.form.get('additionalInformation').value && !isChild" matTooltip="{{this.form.get('additionalInformation').value}}">info</mat-icon>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
6

7
8
9
	<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
	</h5>
	<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
10
11
		<i>{{this.form.get('extendedDescription').value}}</i>
	</h5>
12
	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
13
		<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
14
		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
15
16
	</mat-form-field>

17
18
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
		<div class="row">
19
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
20
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
21
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
22
					 [configuration]="multipleAutoCompleteConfiguration">
23
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
24
25
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
26
27
28
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
29
				</ng-container>
30
31
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
32
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
33
			</mat-form-field>
34
			<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
35
				<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}" [required]="form.get('validationRequired').value" [multiple]="form.get('data').value.multiList">
36
37
					<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
					</mat-option>
38
				</mat-select>
39
40
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
41
42
			</mat-form-field>
		</div>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
43
44
	</div>

45
46
47
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.InternalDmpEntities" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Researchers">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
48
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
49
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
50
					 [configuration]="multipleAutoCompleteConfiguration">
51
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
52
53
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
54
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
55
56
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
57
				</ng-container>
58
59
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
60
61
62
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Datasets">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
63
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
64
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
65
					 [configuration]="multipleAutoCompleteConfiguration">
66
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
67
68
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
69
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
70
71
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
72
				</ng-container>
73
74
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
75
76
77
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === this.datasetProfileInternalDmpEntitiesTypeEnum.Dmps">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
78
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
79
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
80
					 [configuration]="multipleAutoCompleteConfiguration">
81
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
82
83
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
84
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
85
86
					 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
87
				</ng-container>
88
89
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
90
91
92
93
94
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

95
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.CheckBox" class="col-12">
96
97
		<mat-checkbox [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
			{{form.get('data').value.label}}</mat-checkbox>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
98
99
	</div>

100
	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
101
		<textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="1" matAutosizeMaxRows="15" [required]="form.get('validationRequired').value"
102
		 placeholder="{{ form.get('data').value.label | translate }}"></textarea>
103
104
		<!-- <textarea matInput class="text-area" [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
		 placeholder="{{ form.get('data').value.label | translate }}"></textarea> -->
105
		<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
106
107
			<mat-icon>close</mat-icon>
		</button>
108
		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
109
110
	</mat-form-field>

111
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
112
		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
113
114
			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="true">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.YES" | translate }}</mat-radio-button>
			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="false">{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.ACTIONS.NO" | translate }}</mat-radio-button>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
115
		</mat-radio-group>
116
117
		<small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</small>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
118
119
	</div>

120
	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
121
		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
122
			<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index" class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
123
		</mat-radio-group>
124
125
		<small class="text-danger d-block" *ngIf="form.get('value').hasError('required') && form.get('value').touched">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</small>
Diamantis Tziotzios's avatar
Diamantis Tziotzios committed
126
	</div>
127

128
	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
129
130
		<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input" [matDatepicker]="date" [required]="form.get('validationRequired').value"
		 [formControl]="form.get('value')">
131
132
133
134
135
136
		<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
		<mat-datepicker #date></mat-datepicker>
		<mat-error *ngIf="form.get('value').hasError('required')">
			{{'GENERAL.VALIDATION.REQUIRED' | translate}}
		</mat-error>
	</mat-form-field>
137
138
139
140

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ExternalDatasets" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
141
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
142
143
144
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="externalDatasetAutoCompleteConfiguration">
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
145
146
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
147
148
149
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="externalDatasetAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
150
151
152
				</ng-container>
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
153
154
155
156
157
158
159
160
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DataRepositories" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
161
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
162
163
164
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="dataRepositoriesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
165
166
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
167
168
169
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="dataRepositoriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
170
				</ng-container>
171
172
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
173
174
175
176
177
178
179
180
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Registries" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
181
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
182
183
184
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="registriesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
185
186
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
187
188
189
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="registriesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
190
				</ng-container>
191
192
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
193
194
195
196
197
198
199
200
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Services" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
Kristian Ntavidi's avatar
Kristian Ntavidi committed
201
				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
202
203
204
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="servicesAutoCompleteConfiguration">
					</app-multiple-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
205
206
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
207
208
209
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="servicesAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
Kristian Ntavidi's avatar
Kristian Ntavidi committed
210
				</ng-container>
211
212
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
213
214
215
216
217
218
219
220
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Tags" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
221
				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="form.get('value')" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"></app-multiple-auto-complete>
222
223
224
225
226
227
228
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Researchers" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
229
				<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
230
					[configuration]="researchersAutoCompleteConfiguration">
231
232
233
234
235
236
237
238
239
240
241
242
				</app-multiple-auto-complete> -->

				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="researchersAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="researchersAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
				</ng-container>
243
244
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
245
246
247
248
249
250
251
252
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Organizations" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
253
				<!-- <app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
254
255
					[configuration]="organisationsAutoCompleteConfiguration">
				</app-multiple-auto-complete>
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint> -->

				<ng-container *ngIf="form.get('data').value.multiAutoComplete">
					<app-multiple-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="organisationsAutoCompleteConfiguration">
					</app-multiple-auto-complete>
				</ng-container>
				<ng-container *ngIf="!(form.get('data').value.multiAutoComplete)">
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="organisationsAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
				</ng-container>

271
272
273
274
275
276
				<mat-hint>{{ "TYPES.DATASET-PROFILE-COMBO-BOX-TYPE.EXTERNAL-SOURCE-HINT" | translate }}</mat-hint>
			</mat-form-field>
		</div>
	</div>

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatasetIdentifier" class="col-12">
277
		<div class="row" *ngIf="datasetIdInitialized">
278
			<mat-form-field class="col-md-12">
279
280
281
282
283
				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
			<mat-form-field class="col-md-12">
284
				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="'TYPES.DATASET-PROFILE-IDENTIFIER.IDENTIFIER-TYPE' | translate">
285
286
287
288
					<mat-option *ngFor="let type of datasetIdTypes" [value]="type.value">
						{{ type.name }}
					</mat-option>
				</mat-select>
289
290
291
292
293
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
			</mat-form-field>
		</div>
	</div>
294
295
296
297
298
299
300
301
302
303
304
305

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Currency" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-12">
					<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
					 [configuration]="currencyAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
					</app-single-auto-complete>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
			</mat-form-field>
		</div>
	</div>
306
307
308
309
310
311
312
313
314

	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.Validation" class="col-12">
		<div class="row">
			<mat-form-field class="col-md-4">
				<input matInput class="col-md-12" [formControl]="getDatasetIdControl('identifier')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
				</mat-error>
			</mat-form-field>
			<mat-form-field class="col-md-4">
315
				<mat-select class="col-md-12" [formControl]="getDatasetIdControl('type')" [placeholder]="'TYPES.DATASET-PROFILE-VALIDATOR.REPOSITORIES-PLACEHOLDER' | translate">
316
317
318
319
320
321
322
					<mat-option *ngFor="let type of validationTypes" [value]="type.value">
						{{ type.name }}
					</mat-option>
				</mat-select>
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
			</mat-form-field>
323
324
			<div class="col-md-2">
				<button type="button" mat-button class="lightblue-btn" (click)="validateId()">{{ "TYPES.DATASET-PROFILE-VALIDATOR.ACTION" | translate }}</button>
325
326
					<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
					</mat-error>
327
328
329
330
331
				</div>
			<div class="col-md-1">
				<mat-progress-spinner *ngIf="validationIcon === 'loading'" mode="indeterminate" [diameter]="24"></mat-progress-spinner>
				<mat-icon *ngIf="validationIcon !== 'loading'" [ngClass]="{'success': validationIcon === 'done', 'fail': validationIcon === 'clear'}">{{validationIcon}}</mat-icon>
			</div>
332
333
		</div>
	</div>
334
</div>