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

129 lines
3.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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"
>
Limage 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">Aucun pokémon à éditer...</h3>