53 lines
1.8 KiB
HTML
53 lines
1.8 KiB
HTML
<!-- #docregion -->
|
|
<div class="container">
|
|
<div [hidden]="submitted">
|
|
<h1>Hero Form 2 (Template & Messages)</h1>
|
|
<!-- #docregion form-tag-->
|
|
<form #heroForm="ngForm" *ngIf="active" (ngSubmit)="onSubmit()">
|
|
<!-- #enddocregion form-tag-->
|
|
<div class="form-group">
|
|
<!-- #docregion name-with-error-msg -->
|
|
<label for="name">Name</label>
|
|
|
|
<!-- #docregion name-input -->
|
|
<input type="text" id="name" class="form-control"
|
|
required minlength="4" maxlength="24" forbiddenName="bob"
|
|
name="name" [(ngModel)]="hero.name" >
|
|
<!-- #enddocregion name-input -->
|
|
|
|
<div *ngIf="formErrors.name" class="alert alert-danger">
|
|
{{ formErrors.name }}
|
|
</div>
|
|
<!-- #enddocregion name-with-error-msg -->
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="alterEgo">Alter Ego</label>
|
|
<input type="text" id="alterEgo" class="form-control"
|
|
name="alterEgo"
|
|
[(ngModel)]="hero.alterEgo" >
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="power">Hero Power</label>
|
|
<select id="power" class="form-control"
|
|
name="power"
|
|
[(ngModel)]="hero.power" required >
|
|
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
|
</select>
|
|
|
|
<div *ngIf="formErrors.power" class="alert alert-danger">
|
|
{{ formErrors.power }}
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-default"
|
|
[disabled]="!heroForm.form.valid">Submit</button>
|
|
<button type="button" class="btn btn-default"
|
|
(click)="addHero()">New Hero</button>
|
|
</form>
|
|
</div>
|
|
|
|
<hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
|
|
</div>
|