nomulus/console-webapp/src/app/settings/contact/contactDetails.component.html

<h3 mat-dialog-title>Contact details</h3>
<div mat-dialog-content *ngIf="contact">
  <form (ngSubmit)="saveAndClose($event)">
    <p>
      <mat-form-field class="contact-details__input">
        <mat-label>Name: </mat-label>
        <input
          matInput
          [required]="true"
          [(ngModel)]="contact.name"
          [ngModelOptions]="{ standalone: true }"
        />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field class="contact-details__input">
        <mat-label>Primary account email: </mat-label>
        <input
          type="email"
          matInput
          [email]="true"
          [required]="true"
          [(ngModel)]="contact.emailAddress"
          [ngModelOptions]="{ standalone: true }"
        />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field class="contact-details__input">
        <mat-label>Phone: </mat-label>
        <input
          matInput
          [(ngModel)]="contact.phoneNumber"
          [ngModelOptions]="{ standalone: true }"
        />
      </mat-form-field>
    </p>

    <p>
      <mat-form-field class="contact-details__input">
        <mat-label>Fax: </mat-label>
        <input
          matInput
          [(ngModel)]="contact.faxNumber"
          [ngModelOptions]="{ standalone: true }"
        />
      </mat-form-field>
    </p>

    <div class="contact-details__group">
      <label>Contact type:</label>
      <div class="contact-details__group-content">
        <mat-checkbox
          *ngFor="let contactType of contactTypes"
          [checked]="contact.types.includes(contactType.value)"
          (change)="
            $event.checked
              ? contact.types.push(contactType.value)
              : contact.types.splice(
                  contact.types.indexOf(contactType.value),
                  1
                )
          "
          [disabled]="
            contact.types.length === 1 && contact.types[0] === contactType.value
          "
        >
          {{ contactType.label }}
        </mat-checkbox>
      </div>
    </div>

    <section>
      <mat-checkbox
        [(ngModel)]="contact.visibleInWhoisAsAdmin"
        [ngModelOptions]="{ standalone: true }"
        >Show in Registrar WHOIS record as admin contact</mat-checkbox
      >
    </section>

    <section>
      <mat-checkbox
        [(ngModel)]="contact.visibleInWhoisAsTech"
        [ngModelOptions]="{ standalone: true }"
        >Show in Registrar WHOIS record as technical contact</mat-checkbox
      >
    </section>

    <section>
      <mat-checkbox
        [(ngModel)]="contact.visibleInDomainWhoisAsAbuse"
        [ngModelOptions]="{ standalone: true }"
        >Show Phone and Email in Domain WHOIS Record as registrar abuse contact
        (per CL&D requirements)</mat-checkbox
      >
    </section>
    <mat-dialog-actions>
      <button mat-button (click)="close()">Cancel</button>
      <button type="submit" mat-button>Save</button>
    </mat-dialog-actions>
  </form>
</div>