ontology-form.component.html

<form [formGroup]="ontologyForm" (ngSubmit)="submitData()" class="form">
    <!-- 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}}:&nbsp;</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"
                matTextareaAutosize [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>