dnet-applications/frontends/dnet-is-application/src/app/resources/metadata-dialog.html

<form [formGroup]="metadataForm" (ngSubmit)="onSubmit()">
	<h1 mat-dialog-title>Edit metadata</h1>

	<div mat-dialog-content>

		<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
			<mat-label>ID</mat-label>
			<input matInput readonly value="{{data.id}}" />
		</mat-form-field>

		<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
			<mat-label>Type</mat-label>
			<input matInput readonly value="{{data.type}}" />
		</mat-form-field>

		<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
			<mat-label>Name</mat-label>
			<input matInput formControlName="name" required />
			<mat-error *ngIf="metadataForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
		</mat-form-field>

		<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
			<mat-label>Description</mat-label>
			<textarea matInput formControlName="description" rows="8"></textarea>
		</mat-form-field>
	</div>

	<div mat-dialog-actions>
		<button mat-stroked-button color="primary" type="submit" [disabled]="!metadataForm.valid">Submit</button>
		<button mat-stroked-button color="primary" mat-dialog-close>Close</button>
		<mat-error *ngIf="metadataForm.errors?.['serverError']">
			{{ metadataForm.errors?.['serverError'] }}
		</mat-error>
	</div>

</form>