ng-pokemon-app/src/app/pokemon/pokemon-form/pokemon-form.component.html

<form *ngIf="pokemon" (ngSubmit)="onSubmit()" #pokemonForm="ngForm">
  <div class="row">
    <div class="col s8 offset-s2">
      <div class="card-panel">
        <!-- Pokemon name -->
        <div class="form-group">
          <label for="name">Nom</label>
          <input
            type="text"
            class="form-control"
            id="name"
            required
            pattern="^[a-zA-Z0-9àéèç]{1,25}$"
            [(ngModel)]="pokemon.name"
            name="name"
            #name="ngModel"
          />

          <div
            [hidden]="name.valid || name.pristine"
            class="card-panel red accent-1"
          >
            Le nom du pokémon est requis (1-25).
          </div>
        </div>

        <!-- Pokemon picture -->
        <div *ngIf="isAddForm" class="form-group">
          <label for="name">Image</label>
          <input
            type="url"
            class="form-control"
            id="picture"
            required
            [(ngModel)]="pokemon.picture"
            name="picture"
            #picture="ngModel"
          />

          <div
            [hidden]="picture.valid || picture.pristine"
            class="card-panel red accent-1"
          >
            L’image du pokémon est requise.
          </div>
        </div>

        <!-- Pokemon hp -->
        <div class="form-group">
          <label for="hp">Point de vie</label>
          <input
            type="number"
            class="form-control"
            id="hp"
            required
            pattern="^[0-9]{1,3}$"
            [(ngModel)]="pokemon.hp"
            name="hp"
            #hp="ngModel"
          />
          <div
            [hidden]="hp.valid || hp.pristine"
            class="card-panel red accent-1"
          >
            Les points de vie du pokémon sont compris entre 0 et 999.
          </div>
        </div>

        <!-- Pokemon cp -->
        <div class="form-group">
          <label for="cp">Dégâts</label>
          <input
            type="number"
            class="form-control"
            id="cp"
            required
            pattern="^[0-9]{1,2}$"
            [(ngModel)]="pokemon.cp"
            name="cp"
            #cp="ngModel"
          />
          <div
            [hidden]="cp.valid || cp.pristine"
            class="card-panel red accent-1"
          >
            Les dégâts du pokémon sont compris entre 0 et 99.
          </div>
        </div>

        <!-- Pokemon types -->
        <form class="form-group">
          <label for="types">Types</label>
          <p *ngFor="let type of types">
            <label>
              <input
                type="checkbox"
                class="filled-in"
                id="{{ type }}"
                [value]="type"
                [checked]="hasType(type)"
                [disabled]="!isTypesValid(type)"
                (change)="selectType($event, type)"
              />
              <span [attr.for]="type">
                <div class="{{ type | pokemonTypeColor }}">
                  {{ type }}
                </div>
              </span>
            </label>
          </p>
        </form>

        <!-- Submit button -->
        <div class="divider"></div>
        <div class="section center">
          <button
            type="submit"
            class="waves-effect waves-light btn"
            [disabled]="!pokemonForm.form.valid"
          >
            Valider
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
<h3 *ngIf="!pokemon" class="center">
  <app-loader></app-loader>
</h3>