angular-ngrx-pattern/src/app/pages/users-manager/users-management/user-update/user-update.component.html

<div class="container" *ngIf="userFormGrp">
  <ng-container *ngIf="userState">
    <ng-container *ngIf="userState.msgState == msg.FORM_LOADING">
      msg.FORM_LOADING
    </ng-container>

    <ng-container *ngIf="userState.msgState == msg.FORM_LOAD_ERR">
      <div class="alert-danger container">
        {{ msg.FORM_LOAD_ERR }}
      </div>
    </ng-container>

    <ng-container *ngIf="userState.msgState == msg.FORM_LOAD_ERR">
      <div class="alert-danger container">
        {{ msg.FORM_LOAD_ERR }}
      </div>
    </ng-container>

    <ng-container *ngIf="userState.msgState == msg.FORM_LOADED">
      <div class="card mt-3">
        <div class="card-header bg-light">
          User informations to modify: <b>ID of user:
          {{ userState.currentUser?.id }}</b>
        </div>
        <div class="card-body">
          <form
            [formGroup]="userFormGrp"
            (ngSubmit)="onUserUpdate(); userFormGrp.reset()"
          >
            <div class="row">
              <div class="col card">
                <div class="col-md-auto mb-3">
                  <label for="id">Firstname</label>
                  <input
                    type="text"
                    class="form-control"
                    formControlName="firstname"
                    [ngClass]="{
                      'is-invalid':
                        userFormGrp.controls['firstname'].touched &&
                        !userFormGrp.controls['firstname'].valid
                    }"
                  />

                  <div class="invalid-feedback">
                    <span
                      *ngIf="userFormGrp.controls['firstname'].errors?.['required']"
                      >required</span
                    >
                    <span
                      *ngIf="userFormGrp.controls['firstname'].errors?.['minlength']"
                      >min nbr chars 3</span
                    >
                    <span
                      *ngIf="userFormGrp.controls['firstname'].errors?.['maxlength']"
                      >max nbr chars 20</span
                    >
                  </div>
                </div>

                <div class="col-md-auto mb-3">
                  <label for="id">Lastname</label>
                  <input
                    type="text"
                    class="form-control"
                    formControlName="lastname"
                    [ngClass]="{
                      'is-invalid':
                        userFormGrp.controls['lastname'].touched &&
                        !userFormGrp.controls['lastname'].valid
                    }"
                  />

                  <div class="invalid-feedback">
                    <span
                      *ngIf="userFormGrp.controls['lastname'].errors?.['required']"
                      >required</span
                    >
                    <span
                      *ngIf="userFormGrp.controls['lastname'].errors?.['minlength']"
                      >min nbr char 3</span
                    >
                    <span
                      *ngIf="userFormGrp.controls['lastname'].errors?.['maxlength']"
                      >max nbr char 20</span
                    >
                  </div>
                </div>

                <div class="col-md-auto mb-3">
                  <label for="email">Email</label>
                  <input
                    type="text"
                    class="form-control"
                    formControlName="email"
                    [ngClass]="{
                      'is-invalid':
                        userFormGrp.controls['email'].touched &&
                        !userFormGrp.controls['email'].valid
                    }"
                  />

                  <div class="invalid-feedback">
                    <span
                      *ngIf="userFormGrp.controls['email'].errors?.['required']"
                    >
                      required
                    </span>
                    <span
                      *ngIf="userFormGrp.controls['email'].errors?.['email']"
                    >
                      not valid
                    </span>
                  </div>
                </div>
              </div>

              <div class="col card">
                <div formGroupName="address">
                  <div class="col-md-auto mb-3">
                    <label for="numRue">Street number</label>
                    <input
                      type="number"
                      class="form-control"
                      formControlName="numRue"
                      [ngClass]="{
                        'is-invalid':
                          userFormGrp.controls['address'].get('numRue')
                            ?.touched &&
                          !userFormGrp.controls['address'].get('numRue')?.valid
                      }"
                    />
                    <div class="invalid-feedback">
                      <span
                        *ngIf="userFormGrp.controls['address'].get('numRue')?.errors?.['required']"
                        >required</span
                      >
                      <span
                        *ngIf="userFormGrp.controls['address'].get('numRue')?.errors?.['min']"
                        >street num >0
                      </span>
                    </div>
                  </div>

                  <div class="col-md-auto mb-3">
                    <label for="nomRue">Street Name</label>
                    <input
                      type="text"
                      class="form-control"
                      formControlName="nomRue"
                      [ngClass]="{
                        'is-invalid':
                          userFormGrp.controls['address'].get('nomRue')
                            ?.touched &&
                          !userFormGrp.controls['address'].get('nomRue')?.valid
                      }"
                    />
                    <div class="invalid-feedback">
                      <span
                        *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['required']"
                        >required</span
                      >
                      <span
                        *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['minlength']"
                        >min chars 3
                      </span>
                      <span
                        *ngIf="userFormGrp.controls['address'].get('nomRue')?.errors?.['maxlength']"
                        >max chars 15
                      </span>
                    </div>
                  </div>

                  <div class="col-md-auto mb-3">
                    <label for="bp">PB</label>
                    <input
                      type="number"
                      class="form-control"
                      formControlName="bp"
                      [ngClass]="{
                        'is-invalid':
                          userFormGrp.controls['address'].get('bp')?.touched &&
                          !userFormGrp.controls['address'].get('bp')?.valid
                      }"
                    />
                    <div class="invalid-feedback">
                      <span
                        *ngIf="userFormGrp.controls['address'].get('bp')?.errors?.['required']"
                        >required</span
                      >
                      <span
                        *ngIf="userFormGrp.controls['address'].get('bp')?.errors?.['min']"
                        >pb >0
                      </span>
                    </div>
                  </div>

                  <div class="col-md-auto mb-3">
                    <label for="city">City</label>
                    <input
                      type="text"
                      class="form-control"
                      formControlName="ville"
                      [ngClass]="{
                        'is-invalid':
                          userFormGrp.controls['address'].get('ville')
                            ?.touched &&
                          !userFormGrp.controls['address'].get('vile')?.valid
                      }"
                    />
                    <div class="invalid-feedback">
                      <span
                        *ngIf="userFormGrp.controls['address'].get('ville')?.errors?.['required']"
                        >required</span
                      >
                      <span
                        *ngIf="userFormGrp.controls['address'].get('ville')?.errors?.['minlength']"
                        >min chars 3
                      </span>
                      <span
                        *ngIf="userFormGrp.controls['address'].get('ville')?.errors?.['maxlength']"
                        >max chars 15
                      </span>
                    </div>
                  </div>

                  <div class="col-md-auto mb-3">
                    <label for="pays">Country</label>
                    <input
                      type="text"
                      class="form-control"
                      formControlName="pays"
                      [ngClass]="{
                        'is-invalid':
                          userFormGrp.controls['address'].get('pays')
                            ?.touched &&
                          !userFormGrp.controls['address'].get('pays')?.valid
                      }"
                    />
                    <div class="invalid-feedback">
                      <span
                        *ngIf="userFormGrp.controls['address'].get('pays')?.errors?.['required']"
                        >required</span
                      >
                      <span
                        *ngIf="userFormGrp.controls['address'].get('pays')?.errors?.['minlength']"
                        >min chars 3
                      </span>
                      <span
                        *ngIf="userFormGrp.controls['address'].get('pays')?.errors?.['maxlength']"
                        >max chars 15
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

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

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

  </ng-container>
</div>