angular-ngrx-pattern/src/app/pages/companies-manager/companies-management/company-update/company-update.component.html

<div class="container" *ngIf="companyFormGroup">
  <ng-container *ngIf="companyState.msgState == msgState.FORM_LOADING">
    {{companyState.msgState}}
  </ng-container>
  <ng-container *ngIf="companyState.msgState == msgState.FORM_LOAD_ERR">
    {{companyState.msgState}}
  </ng-container>

  <ng-container *ngIf="companyState.msgState == msgState.FORM_LOADED">

    <div class="card mt-3" style="width: 18rem">
      <div class="card-header">Update company informations</div>

      <div class="card-body">
        <form [formGroup]="companyFormGroup"
          (ngSubmit)="onCompanyUpdate(); companyFormGroup.reset()"
        >
          <div class="col-md-auto mb-3">
            <label for="companyName">Company name</label>
            <input
              type="text"
              formControlName="companyName"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                companyFormGroup.controls['companyName'].touched &&
                  !companyFormGroup.controls['companyName'].valid
              }"
            />
            <div class="invalid-feedback">
              <span
                *ngIf="companyFormGroup.controls['companyName'].errors?.['required']"
              >
                required
              </span>
              <span
                *ngIf="companyFormGroup.controls['companyName'].errors?.['minlength']"
              >
                min nbr chars 5
              </span>
            </div>
          </div>

          <div class="col-md-auto mb-3">
            <label for="type">Company type</label>
            <select formControlName="companyType" class="form-control">

              <option *ngFor="let companyType of companyTypes | keyvalue " [ngValue]="companyType.value">
                  {{companyType.value}}
              </option>

            </select>
          </div>

          <div class="text-center col-md-auto mt-3">
            <button
              class="btn btn-outline-primary"
              type="submit" [disabled]="!companyFormGroup.valid"
            >
              update
            </button>
          </div>

        </form>
      </div>
    </div>
  </ng-container>


  <ng-container *ngIf="companyState.msgState == msgState.UPDATED">
    <div class="alert-success container p-3 m-3" style="width: 30em">
      <span> {{ msgState.UPDATED }}</span> &nbsp;&nbsp;
      <button class="btn btn-success" (click)="onUpdateOk()">OK</button>
    </div>
  </ng-container>

</div>