organizee-front/src/app/pages/page-add-member/page-add-member.component.html

<app-header></app-header>

<div class="container-fluid">
  <div class="row">
    <app-side-bar></app-side-bar>
    <div class="col-9 offset-2" id="main">
      <div class="form-addMember">
        <form (ngSubmit)="onSubmit()" [formGroup]="addMemberForm">
          <div class="form-floating">
            <input
              type="color"
              class="form-control"
              id="floatingInputcouleur"
              placeholder=""
              name="couleur"
              formControlName="couleurFc"
            />
          </div>
          <div class="form-floating">
            <input
              type="text"
              class="form-control"
              id="floatingInputlastName"
              placeholder=""
              name="lastName"
              formControlName="lastNameFc"
              [ngClass]="{
                'is-valid':
                  addMemberForm.controls['lastNameFc'].touched &&
                  addMemberForm.controls['lastNameFc'].valid,
                'is-invalid':
                  addMemberForm.controls['lastNameFc'].touched &&
                  !addMemberForm.controls['lastNameFc'].valid
              }"
            />
            <label for="floatingInputlastName">VOTRE NOM</label>
          </div>
          <div class="form-floating">
            <input
              type="text"
              class="form-control"
              id="floatingInputfirstName"
              placeholder=""
              name="firstName"
              formControlName="firstNameFc"
              [ngClass]="{
                'is-valid':
                  addMemberForm.controls['firstNameFc'].touched &&
                  addMemberForm.controls['firstNameFc'].valid,
                'is-invalid':
                  addMemberForm.controls['firstNameFc'].touched &&
                  !addMemberForm.controls['firstNameFc'].valid
              }"
            />
            <label for="floatingInputfirstName">VOTRE PRENOM</label>
          </div>
          <div class="form-floating">
            <input
              type="date"
              class="form-control"
              id="floatingInputdateNaissance"
              placeholder=""
              name="dateNaissance"
              formControlName="dateNaissanceFc"
              [ngClass]="{
                'is-valid':
                  addMemberForm.controls['dateNaissanceFc'].touched &&
                  addMemberForm.controls['dateNaissanceFc'].valid,
                'is-invalid':
                  addMemberForm.controls['dateNaissanceFc'].touched &&
                  !addMemberForm.controls['dateNaissanceFc'].valid
              }"
            />
            <label for="floatingInputdateNaissance"
              >VOTRE DATE DE NAISSANCE</label
            >
          </div>
          <div class="form-floating">
            <input
              type="email"
              class="form-control"
              id="floatingInputemail"
              placeholder=""
              name="email"
              formControlName="emailFc"
              [ngClass]="{
                'is-valid':
                  addMemberForm.controls['emailFc'].touched &&
                  addMemberForm.controls['emailFc'].valid,
                'is-invalid':
                  addMemberForm.controls['emailFc'].touched &&
                  !addMemberForm.controls['emailFc'].valid
              }"
            />
            <label for="floatingInputemail">Votre Email</label>
          </div>
          <div class="form-floating">
            <select
              class="form-control"
              id="floatingInputRole"
              placeholder=""
              name="Role"
              formControlName="roleFc"
            >
              <option value="ROLE_PARENT">Adulte</option>
              <option value="ROLE_ENFANT">Enfant</option>
            </select>
            <label value="ROLE_PARENT">Sélectionner un profil</label>
          </div>
          <div class="form-floating">
            <input
              type="password"
              class="form-control"
              id="floatingPassword"
              placeholder=""
              name="password"
              formControlName="passwordFc"
              [ngClass]="{
                'is-valid':
                  addMemberForm.controls['passwordFc'].touched &&
                  addMemberForm.controls['passwordFc'].valid,
                'is-invalid':
                  addMemberForm.controls['passwordFc'].touched &&
                  !addMemberForm.controls['passwordFc'].valid
              }"
            />
            <label for="floatingPassword">MOT DE PASSE</label>
          </div>
          <div class="form-floating">
            <input
              type="password"
              class="form-control"
              id="floatingpasswordConfirm"
              placeholder=""
              name="passwordConfirm"
              formControlName="passwordConfirmFc"
              [ngClass]="{
                'is-valid':
                  addMemberForm.controls['passwordConfirmFc'].touched &&
                  addMemberForm.controls['passwordConfirmFc'].valid,
                'is-invalid':
                  addMemberForm.controls['passwordConfirmFc'].touched &&
                  !addMemberForm.controls['passwordConfirmFc'].valid
              }"
            />
            <label for="floatingPasswordConfirm"
              >CONFIRMEZ VOTRE MOT DE PASSE</label
            >
          </div>

          <button
            class="w-100 btn btn-lg btn-outline-success"
            type="submit"
            [disabled]="addMemberForm.invalid"
          >
            Ajouter le membre
          </button>
        </form>
      </div>
    </div>
  </div>
</div>