mp-common/admin/users/user-dialog/user-dialog.component.html

This is XPO MarketPlace common libary

<div xpo-dialog-header>
  <h1 id="new-user-title" *ngIf="selectedUser.id==null; else editHeader" xpo-dialog-title>new user</h1>
  <ng-template id="selected-user" #editHeader>
    <h1 xpo-dialog-title id="edit-user-title">edit {{selectedUser.firstName}} {{selectedUser.lastName}}</h1>
  </ng-template>
  <div xpo-dialog-header-action>
    <xpo-icon id="close-user-icon" color="primary" (click)="onClose()">close</xpo-icon>
  </div>
</div>
<div xpo-dialog-content>
  <div class="xpo-flex-right">
    <button id="delete-user-btn" xpo-btn="secondary" (click)="onDeleteUser()" *ngIf="selectedUser.id!=null">Delete User</button>
  </div>

  <form #userForm="ngForm">
    <xpo-input-container>
      <input xpoInput size="100" type="email" placeholder="Email" id="email" name="email" [(ngModel)]="selectedUser.email" #email="ngModel"
        required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
      <xpo-error *ngIf="email.errors && email.errors.required">
        Email is required
      </xpo-error>
      <xpo-error *ngIf="email.errors && email.errors.pattern">
        Enter valid email
      </xpo-error>
    </xpo-input-container>

    <xpo-input-container>
      <input xpoInput size="100" type="text" placeholder="First Name" id="first-name" minlength="4" maxlength="24" name="firstName"
        [(ngModel)]="selectedUser.firstName" #firstName="ngModel" required>
      <xpo-error *ngIf="firstName.errors && firstName.errors.required">
        First Name is required
      </xpo-error>
      <xpo-error *ngIf="firstName.errors && firstName.errors.minlength">
        First Name must be at least 4 characters long
      </xpo-error>
      <xpo-error *ngIf="firstName.errors && firstName.errors.maxlength">
        First Name cannot be more than 24 characters long
      </xpo-error>
    </xpo-input-container>

    <xpo-input-container>
      <input xpoInput size="100" type="text" placeholder="Last Name" id="last-name" minlength="4" maxlength="24" name="lastName"
        [(ngModel)]="selectedUser.lastName" #lastName="ngModel" required>
      <xpo-error *ngIf="lastName.errors && lastName.errors.required">
        Last Name is required
      </xpo-error>
      <xpo-error *ngIf="lastName.errors && lastName.errors.minlength">
        Last Name must be at least 4 characters long
      </xpo-error>
      <xpo-error *ngIf="lastName.errors && lastName.errors.maxlength">
        Last Name cannot be more than 24 characters long
      </xpo-error>
    </xpo-input-container>

    <xpo-input-container>
      <input xpoInput size="100" type="tel" placeholder="Phone number" id="phone-number" maxlength="13" name="phoneNumber" [(ngModel)]="selectedUser.phoneNumber"
        required #phoneNumber="ngModel" pattern="^\d{4}-\d{3}-\d{4}$">
      <xpo-error *ngIf="phoneNumber.errors && phoneNumber.errors.required">
        Phone number is required
      </xpo-error>
      <xpo-error *ngIf="phoneNumber.errors && phoneNumber.errors.pattern">
        Enter valid phone number (format: xxxx-xxx-xxxx)
      </xpo-error>
    </xpo-input-container>

    <h3 id="div-role-title" class="xpo-bold div-role-title">division - role</h3>
    <app-division-role></app-division-role>
  </form>
  <div xpo-dialog-actions>
    <button id="save-user-btn" xpo-btn="primary-form lg" (click)="onSave()" [disabled]="!userForm.valid ||  isRolesEmpty()">Save</button>
    <button id="cancel-user-btn" xpo-btn="plain lg" (click)="onClose()">Cancel</button>
  </div>
</div>