/
ontology-form.component.html
48 lines (44 loc) · 2.31 KB
/
ontology-form.component.html
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
<dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>
<form [formGroup]="ontologyForm" (ngSubmit)="submitData()" class="form" *ngIf="!loading">
<!-- auto complete list to select resource classes -->
<div class="form-content">
<mat-form-field class="large-field ontology-name">
<input matInput class="ontology-name" [maxlength]="nameMaxLength" [formControl]="ontologyForm.controls['name']"
[placeholder]="'Set a unique name *'">
<mat-hint *ngIf="formErrors.name" class="medium-field">
{{ formErrors.name }}
</mat-hint>
<mat-hint align="end">{{ontologyForm.controls['name'].value.length}} / {{nameMaxLength}}</mat-hint>
</mat-form-field>
<mat-form-field class="large-field ontology-label">
<input matInput [formControl]="ontologyForm.controls['label']" [placeholder]="iri ? 'Label *' : 'Label'"
[value]="ontologyLabel">
<span *ngIf="!iri" matPrefix>{{project.shortname}}: </span>
<mat-hint *ngIf="formErrors.label">
{{ formErrors.label }}
</mat-hint>
</mat-form-field>
<mat-form-field class="large-field ontology-comment">
<textarea matInput [formControl]="ontologyForm.controls['comment']"
[placeholder]="'Comment'" [value]="ontologyComment"
[matAutosizeMinRows]="6" [matAutosizeMaxRows]="12">
</textarea>
</mat-form-field>
<div class="form-panel form-action">
<span>
<button mat-button type="button" (click)="closeDialog.emit()">
{{ 'appLabels.form.action.cancel' | translate }}
</button>
</span>
<span class="fill-remaining-space"></span>
<span>
<button mat-raised-button type="submit" [color]="error ? 'warn' : 'primary'" [disabled]="!ontologyForm.valid">
<dsp-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
</dsp-progress-indicator>
<mat-icon *ngIf="error && !loading">close</mat-icon>
{{error ? 'Failed' : (iri ? 'Update' : 'Create')}}
</button>
</span>
</div>
</div>
</form>