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>