angular-ngrx-pattern/src/app/pages/projects-manager/projects-management/project-update/project-update.component.html

<div class="container" *ngIf="projectFormGroup">
  <ng-container *ngIf="projectState" [ngSwitch]="projectState.msgState">
    <ng-container *ngSwitchCase="msgState.FORM_LOADING">
      {{ projectState.msgState }}
    </ng-container>

    <ng-container *ngSwitchCase="msgState.FORM_LOAD_ERR">
      {{ projectState.msgState }}
    </ng-container>

    <ng-container *ngSwitchCase="msgState.FORM_LOADED">
      <!-- create form -->

      <div class="card mt-3">
        <div class="card-header bg-light">
          >> Project ID: <b>{{ projectState.currentProject?.id }}</b>, User ID:
            <b>{{ projectState.currentProject?.userId }}</b>, Company ID:
            <b>{{ projectState.currentProject?.companyId }}</b>

        </div>
        <div class="card-body">
          <form
            [formGroup]="projectFormGroup"
            (ngSubmit)="onProjectUpdate(); projectFormGroup.reset()"
          >
            <div class="row">
              <!-- 1ère colonne -->
              <div class="col">
                <div class="col-md-auto mb-3">
                  <label for="projectName">Project name</label>
                  <input
                    type="text"
                    formControlName="projectName"
                    class="form-control"
                    [ngClass]="{
                      'is-invalid':
                        projectFormGroup.controls['projectName'].touched &&
                        !projectFormGroup.controls['projectName'].valid
                    }"
                  />
                  <div class="invalid-feedback">
                    <span
                      *ngIf="projectFormGroup.controls['projectName'].errors?.['required']"
                      >required</span
                    >
                    <span
                      *ngIf="projectFormGroup.controls['projectName'].errors?.['minlength']"
                      >min nbr chars 5</span
                    >
                    <span
                      *ngIf="projectFormGroup.controls['projectName'].errors?.['maxlength']"
                      >min nbr chars 20</span
                    >
                  </div>
                </div>

                <div class="col-md-auto mb-3">
                  <label for="priority">Priority</label>
                  <select formControlName="priority" class="form-control">
                    <option value="Choose a priority" disabled>
                      Choose a priority
                    </option>
                    <option
                      *ngFor="let priority of priorities"
                      [ngValue]="priority"
                    >
                      {{ priority }}
                    </option>
                  </select>
                </div>
              </div>

              <!-- 2ème colonne -->
              <div class="col">
                <div class="col-md-auto mb-3">
                  <label for="description">Description</label>
                  <input
                    type="text"
                    formControlName="description"
                    class="form-control"
                    [ngClass]="{
                      'is-invalid':
                        projectFormGroup.controls['description'].touched &&
                        !projectFormGroup.controls['description'].valid
                    }"
                  />
                  <div class="invalid-feedback">
                    <span
                      *ngIf="projectFormGroup.controls['description'].errors?.['required']"
                      >required</span
                    >
                    <span
                      *ngIf="projectFormGroup.controls['description'].errors?.['minlength']"
                      >min desc chars 25</span
                    >
                  </div>
                </div>

                <div class="col-md-auto mb-3">
                  <label for="state">State</label>
                  <select formControlName="state" class="form-control">
                    <option
                      *ngFor="let state of projectMsgState | keyvalue"
                      [ngValue]="state.value"
                    >
                      {{ state.value }}
                    </option>
                  </select>
                </div>
              </div>
            </div>

            <div class="col-md-auto mb-3">
              <label for="userId"
                >ReAssign project to another user, choose user ID</label
              >
              <select formControlName="userId" class="form-control">
                <option [ngValue]="null" desabled>choose user ID</option>
                <option
                  *ngFor="let user of userState.usersList"
                  [ngValue]="user.id"
                >
                  {{ user.id }}
                </option>
              </select>
            </div>

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

    <ng-container *ngSwitchCase="msgState.UPDATED">
      <div class="alert-success container p-3 m-3" style="width: 30em">
        <button class="btn btn-success" (click)="onUpdateOk()">
          {{ projectState.msgState }}
        </button>
      </div>
    </ng-container>
  </ng-container>
</div>