<form *ngIf="!isRegistrationComplete; else registrationComplete" [formGroup]="registerForm" (ngSubmit)="onSubmit()" novalidate >
  <div class="form-group">
    <label for="firstName">{{entity.FirstName}} <span class="error-message">*</span></label>
    <input type="text" class="form-control" formControlName="firstName"
      [ngClass]="{'is-invalid': checkInvalid('firstName') && isSubmitted}" required>
    <small class="form-text error-message" *ngIf="checkInvalid('firstName') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="lastName">{{entity.LastName}} <span class="error-message">*</span></label>
    <input type="text" class="form-control" formControlName="lastName"
      [ngClass]="{'is-invalid': checkInvalid('lastName') && isSubmitted}" required>
    <small class="form-text error-message" *ngIf="checkInvalid('lastName') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="email">{{entity.EmailAddress}} <span class="error-message">*</span></label>
    <input type="email" class="form-control" formControlName="email"
      [ngClass]="{'is-invalid': checkInvalid('email') && isSubmitted}" required>
    <small class="form-text error-message"
      *ngIf="checkIfTouched('email') && checkForErrors('email', 'email')">{{emailAddressIncorrectLabel}}</small>
    <small class="form-text error-message" *ngIf="checkInvalid('email') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="confirmEmail">{{entity.EmailAddressConfirm}} <span class="error-message">*</span></label>
    <input type="email" class="form-control" formControlName="confirmEmail"
      [ngClass]="{'is-invalid': checkInvalid('confirmEmail') && isSubmitted}" required>
    <small class="form-text error-message"
      *ngIf="checkIfTouched('confirmEmail') && checkForErrors('confirmEmail', 'match')">{{emailAddressConfirmLabel}}</small>
    <small class="form-text error-message"
      *ngIf="checkInvalid('confirmEmail') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="password">{{entity.ChoosePassword}} <span class="error-message">*</span></label>
    <input type="password" class="form-control" formControlName="password"
      [ngClass]="{'is-invalid': checkInvalid('password') && isSubmitted}" required>
    <small class="form-text error-message"
      *ngIf="checkIfTouched('password') && checkPassword()">{{passwordStrongLabel}}</small>
    <small class="form-text error-message" *ngIf="checkInvalid('password') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="confirmPassword">{{entity.ConfirmPassword}}<span class="error-message">*</span></label>
    <input type="password" class="form-control" formControlName="confirmPassword"
      [ngClass]="{'is-invalid': checkInvalid('confirmPassword') && isSubmitted}" required>
    <small class="form-text error-message"
      *ngIf="checkIfTouched('confirmPassword') && checkForErrors('confirmPassword', 'match')">{{passwordNoMatchLabel}}</small>
    <small class="form-text error-message"
      *ngIf="checkInvalid('confirmPassword') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="phoneNumber">{{entity.PhoneNumber}} <span class="error-message">*</span></label>
    <input type="text" class="form-control" formControlName="phoneNumber"
      [ngClass]="{'is-invalid': checkInvalid('phoneNumber') && isSubmitted}" required>
    <small class="form-text error-message"
      *ngIf="checkIfTouched('phoneNumber') && checkPhoneNumber()">{{phoneNumberLabel}}</small>
    <small class="form-text error-message" *ngIf="checkInvalid('phoneNumber') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="companyName">{{entity.CompanyName}} <span class="error-message">*</span></label>
    <input type="text" class="form-control" formControlName="companyName"
      [ngClass]="{'is-invalid': checkInvalid('companyName') && isSubmitted}" required>
    <small class="form-text error-message" *ngIf="checkInvalid('companyName') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="address">{{entity.Address}} <span class="error-message">*</span></label>
    <input type="textarea" class="form-control" formControlName="address"
      [ngClass]="{'is-invalid': checkInvalid('address') && isSubmitted}" required>
    <small class="form-text error-message" *ngIf="checkInvalid('address') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="zipCode">{{entity.ZipCode}} <span class="error-message">*</span></label>
    <input type="text" class="form-control" formControlName="zipCode"
      [ngClass]="{'is-invalid': checkInvalid('zipCode') && isSubmitted}" required>
    <small class="form-text error-message" *ngIf="checkInvalid('zipCode') && isSubmitted">{{mandatoryLabel}}</small>
  </div>

  <div class="form-group">
    <label for="userType">{{entity.Role}} <span class="error-message">*</span></label>
    <select class="form-control" formControlName="userType"
      [ngClass]="{'is-invalid': checkInvalid('userType') && isSubmitted}" required>
      <option value="">Select User Type</option>
      <option *ngFor="let userType of typeOfUsers" [ngValue]="userType.Key">{{userType.Key}}</option>
    </select>
    <small class="form-text error-message" *ngIf="checkInvalid('userType') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="industry">{{entity.Industry}}<span class="error-message">*</span></label>
    <select class="form-control" formControlName="industry"
      [ngClass]="{'is-invalid': checkInvalid('industry') && isSubmitted}" required>
      <option value="">Select Industry</option>
      <option *ngFor="let industry of industries" [ngValue]="industry.Key">{{industry.Key}}</option>
    </select>
    <small class="form-text error-message" *ngIf="checkInvalid('industry') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <label for="preferedLanguage">{{entity.PreferredLanguage}}<span class="error-message">*</span></label>
    <select class="form-control" formControlName="preferedLanguage"
      [ngClass]="{'is-invalid': checkInvalid('preferedLanguage') && isSubmitted}" required>
      <option value="">Select Prefered Language</option>
      <ng-container *ngFor="let language of languages">
        <option *ngIf="language.Value" [ngValue]="language.Key">{{language.Key}}</option>
      </ng-container>
    </select>
    <small class="form-text error-message"
      *ngIf="checkInvalid('preferedLanguage') && isSubmitted">{{mandatoryLabel}}</small>
  </div>

  <div class="form-group" *ngIf="!isEmpty(countryList)">
    <label for="location">{{entity.Location}} <span class="error-message">*</span></label>
    <select class="form-control" formControlName="location"
      [ngClass]="{'is-invalid': checkInvalid('location') && isSubmitted}" required>
      <option value="">Select Country</option>
      <option *ngFor="let country of countryList" [ngValue]="country.Title">{{country.Title}}</option>
    </select>
    <small class="form-text error-message" *ngIf="checkInvalid('location') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group" *ngIf="!isEmpty(regionList)">
    <label for="region">{{entity.Region}} <span class="error-message">*</span></label>
    <select class="form-control" formControlName="region"
      [ngClass]="{'is-invalid': checkInvalid('region') && isSubmitted }" required>
      <option value="">Select Region</option>
      <option *ngFor="let region of regionList" [ngValue]="region.Title">{{region.Title}}</option>
    </select>
    <small class="form-text error-message" *ngIf="checkInvalid('region') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group" *ngIf="!isEmpty(stateList)">
    <label for="state">{{entity.State}} <span class="error-message">*</span></label>
    <select class="form-control" formControlName="state"
      [ngClass]="{'is-invalid': checkInvalid('state') && isSubmitted}" required>
      <option value="">Select State</option>
      <option *ngFor="let state of stateList" [ngValue]="state.Title">{{state.Title}}</option>
    </select>
    <small class="form-text error-message" *ngIf="checkInvalid('state') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div *ngIf="isLoading">
    <img src="./v2/assets/img/loader.gif" />
  </div>


  <div class="form-group">
    <label for="city">{{entity.City}} <span class="error-message">*</span></label>
    <input type="text" class="form-control" formControlName="city"
      [ngClass]="{'is-invalid': checkInvalid('city') && isSubmitted}" required>
    <small class="form-text error-message" *ngIf="checkInvalid('city') && isSubmitted">{{mandatoryLabel}}</small>
  </div>
  <div class="form-group">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{entity.Interested}}</h5>
        <div class="card-text">

          <div class="form-check container" (click)="selectDeselectAll(selectAll)">
            <input  type="checkbox" class="form-check-input" #selectAll>
            <label class="form-check-label" > All </label>
            <label class="checkmark" ></label>
          </div>
          
          <ng-container *ngIf="registerForm.controls.optInOptions.value.length > 0">
            <div class="form-check container"
              *ngFor="let opt of registerForm.controls.optInOptions.controls; let i=index">
              <input name="interest" [formControl]="opt" [value]="optionList[i].Value" type="checkbox"
                class="form-check-input" [id]="optionList[i].Value">
              <label class="form-check-label" [for]="optionList[i].Value">
                {{optionList[i].Key}}
              </label>
              <label class="checkmark" [for]="optionList[i].Value"></label>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="termsAndCondition" formControlName="termsAndCondition">
    <label class="form-check-label" for="termsAndCondition">{{termsarray[0]}}
      <a component-link [linkObject]="entity.TermsAndConditions" class="no-new-window-icon">{{entity.TermsAndConditions.LinkButtonTitleText}}</a>
      {{termsarray[1]}}
      <a component-link [linkObject]="entity.PrivacyPolicy" class="no-new-window-icon">{{entity.PrivacyPolicy.LinkButtonTitleText}}</a>
      {{termsarray[2]}} <span class="error-message">* </span> </label>
    <label class="checkmark" for="termsAndCondition"></label>
    <small class="form-text error-message" *ngIf="checkInvalid('termsAndCondition') && isSubmitted">
      {{mandatoryLabel}}
    </small>
  </div>
  <button type="submit" class="btn btn-green mr-1 mb-1" [disabled]="isSubmitted && registerForm.invalid" [ngClass]="{'loading': isRegistrationUnderProcess}"  >
		<span>{{registerLabel}}</span>
	</button>
  <span *ngIf="isRegistrationUnderProcess"> 
    <img src="./v2/assets/img/loader.gif" />
  </span>
  <small class="form-text error-message" *ngIf="isSubmitted && errorMessageLabel">
    {{errorMessageLabel}}
  </small>
</form>
<ng-template #registrationComplete>
  <my-profile-confirmation [user]="user"></my-profile-confirmation>
</ng-template>

./my-profile-register.component.scss

@import "src/app/styles/helpers";
@import "~bootstrap/scss/spinners";

form {
  max-width: calc-rem(700);

  .error-message{
      color: $red;
  }
  
 
  .form-check {
      display: flex;
      position: relative;
      padding-left: calc-rem(35);
      padding-bottom: calc-rem(6);
      padding-top: calc-rem(6);
      font-size: inherit;
  
      /* Hide the browser's default checkbox */
      &-input {
        position: absolute;
        display: none;
        cursor: pointer;
        height: 0;
        width: 0;
  
        /* Show the checkmark when checked */
        &:checked~.checkmark:after {
          display: block;
        }
      }
  
      &-label{
        flex-grow: 1;
        cursor: pointer;
      }
  
      /* Create a custom checkbox */
      .checkmark {
        position: absolute;
        top: 6px;
        left: 5px;
        height: calc-rem(16);
        width: calc-rem(15);
        background-color: $white;
        border: 1px solid $slate;
        margin-top: calc-rem(7);
        cursor: pointer;
  
        /* Create the checkmark/indicator (hidden when not checked) */
        &:after {
          content: "";
          position: absolute;
          display: none;
          left: 4px !important;
          top: 2px !important;
          width: 5px !important;
          height: 10px !important;
          border: solid $blue !important;
          border-width: 0 3px 3px 0 !important;
          border-radius: 0px !important;
          background-color: transparent !important;
          transform: rotate(45deg);
        }
      }
    }
    
    .input-group-text {
      background-color: $off-white;  // Color of image background.
      padding: 0 calc-rem(8);
      border: 1px solid $light-slate;
  
      img {
          width: calc-rem(30);
          height: calc-rem(24);
      }
  }
  
  .search-box-query {
      height: calc-rem(41);
      padding: calc-rem(8);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 1px solid $light-slate;
      border-left: none;
  
      &:focus {
          box-shadow: none;
      }
  }
  .no-new-window-icon {
    // Remove the automatically added new-window icon because it's an internal link
    &[target="_blank"]:after {
        content: none;
    }
  }
}

.btn {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
	display: inline;

	&:focus {
		outline: none !important;
		border: none !important;
		box-shadow: none;
	}

	&.loading {
		background-color:rgba(136, 192, 8, 0.3);// #green with 30% opacity
		border-color: rgba(136, 192, 8, 0.3);	// #green with 30% opacity
	}
}