129 lines
3.5 KiB
HTML
129 lines
3.5 KiB
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">Aucun pokémon à éditer...</h3>
|