basic-info-form.component.html

<form [formGroup]="basicInfoFormGroup">
  <div fxLayout="column">
    <div class="vertical-form-field">
      <div class="label">First Name</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <input formControlName="firstName" matInput placeholder="Enter first name" maxlength="50">
          <mat-error *ngIf="basicInfoFormGroup.controls['firstName'].invalid">Please enter a valid first name</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Last Name</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <input formControlName="lastName" matInput placeholder="Enter last name" maxlength="50">
          <mat-error *ngIf="basicInfoFormGroup.controls['lastName'].invalid">Please enter a valid last name</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Email</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="50" fxFlex.lt-md="100">
          <input formControlName="email" matInput placeholder="Enter email address" maxlength="50">
          <mat-error *ngIf="basicInfoFormGroup.get('email').hasError('emailExists'); else otherErrorCheck">That email already exists!</mat-error>
          <ng-template #otherErrorCheck>
            <mat-error *ngIf="basicInfoFormGroup.controls['email'].invalid">Please enter a valid email address</mat-error>
          </ng-template>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Title</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <input formControlName="title" matInput placeholder="Enter title" maxlength="30">
          <mat-error *ngIf="basicInfoFormGroup.controls['title'].invalid">Please enter a valid title</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Account <span *ngIf="newAccount" class="badge badge-info">New</span></div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <input type="text"
                 placeholder="Select or enter account name"
                 matInput
                 formControlName="account"
                 [matAutocomplete]="auto"
                 (blur)="leftAccountField()">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let account of filteredAccounts | async" [value]="account.name">
              {{account.name}}
            </mat-option>
          </mat-autocomplete>
          <mat-error *ngIf="basicInfoFormGroup.controls['account'].invalid">Please enter or select a valid account name</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Source</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <mat-select formControlName="source" placeholder="Select a source">
            <mat-option *ngFor="let source of availableSources" [value]="source.value">
              {{source.display}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="basicInfoFormGroup.controls['source'].invalid">Please select a source</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Source Details</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="50" fxFlex.lt-md="100">
          <input formControlName="sourceDetails" matInput placeholder="Enter source details" maxlength="100">
          <mat-error *ngIf="basicInfoFormGroup.controls['sourceDetails'].invalid">Please enter valid source details</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Status</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <mat-select formControlName="status" placeholder="Select a status">
            <mat-option *ngFor="let status of availableContactStatuses" [value]="status.value">
              {{status.display}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="basicInfoFormGroup.controls['status'].invalid">Please select a status</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Line of Business</div>
      <div>
        <mat-form-field appearance="fill" class="no-label-field" fxFlex="30" fxFlex.lt-md="100">
          <mat-select multiple formControlName="lineOfBusiness" placeholder="Select a line of business">
            <mat-option *ngFor="let lob of availableLinesOfBusiness" [value]="lob.value">
              {{lob.display}}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="basicInfoFormGroup.controls['lineOfBusiness'].invalid">Please select a line of business</mat-error>
        </mat-form-field>
      </div>
    </div>

    <div class="vertical-form-field">
      <div class="label">Has Authority</div>
      <div>
        <mat-radio-group formControlName="authority">
          <mat-radio-button value="true">Yes</mat-radio-button>
          <mat-radio-button value="false">No</mat-radio-button>
        </mat-radio-group>
      </div>
    </div>
  </div>
</form>