mp-common/admin/user-profile/user-profile.component.html

This is XPO MarketPlace common libary

<form #myProfileForm="ngForm">
  <div class="profile-data">
    <xpo-card>
      <card-header>
        <card-header-title id="personal-info">PERSONAL INFORMATION</card-header-title>
        <card-header-actions></card-header-actions>
      </card-header>
      <card-content>
        <ul class="profile-personal-info">
          <li>
            <xpo-input-container>
              <input xpoInput id="user-profile-firstName" placeholder="First name" [(ngModel)]="userProfile.user.firstName" #firstName="ngModel"
                name="firstName" minlength="4" maxlength="24" 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>
          </li>
          <li>
            <xpo-input-container>
              <input xpoInput id="user-profile-lastName" placeholder="Last Name" [(ngModel)]="userProfile.user.lastName" #lastName="ngModel"
                name="lastName" minlength="4" maxlength="24" 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>
          </li>
          <li>
            <xpo-input-container>
              <input xpoInput id="user-profile-phoneNo" placeholder="Phone Number" [(ngModel)]="userProfile.user.phoneNumber" #phoneNumber="ngModel"
                name="phoneNumber" pattern="^\d{4}-\d{3}-\d{4}$" required>
              <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>
          </li>
          <li>
            <xpo-input-container>
              <input xpoInput id="user-profile-email" placeholder="Email" [(ngModel)]="userProfile.user.email" #email="ngModel" name="email"
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
              <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>
          </li>
        </ul>
      </card-content>
    </xpo-card>


    <xpo-card>
      <card-header>
        <card-header-title id="update-password">UPDATE PASSWORD</card-header-title>
        <card-header-actions></card-header-actions>
      </card-header>
      <card-content>
        <ul class="profile-update-password">
          <li>
            <xpo-input-container>
              <input xpoInput placeholder="Password" [(ngModel)]="userProfile.password" #password="ngModel" type="password" name="password"
                required>
              <xpo-error *ngIf="password.errors && password.errors.required">
                Password is required.
              </xpo-error>
            </xpo-input-container>
          </li>
          <li>
            <xpo-input-container>
              <input xpoInput placeholder="Password Confirmation" type="password" name="confirmPassword" [(ngModel)]="userProfile.confirmPassword"
                #confirmPassword="ngModel" required pattern="{{userProfile.password}}">
              <xpo-error *ngIf="confirmPassword.errors && confirmPassword.errors.required">
                Please confirm password.
              </xpo-error>
              <xpo-error *ngIf="confirmPassword.errors && confirmPassword.errors.pattern">
                Password mismatch.
              </xpo-error>
            </xpo-input-container>
          </li>
        </ul>
      </card-content>
    </xpo-card>
  </div>
</form>
<div class="profile-save-btn">
  <button id="save-profile-btn" xpo-btn="primary-form" (click)="onSaveProfile()" [disabled]="!myProfileForm.valid">Save</button>
</div>