68 lines
2.2 KiB
HTML
68 lines
2.2 KiB
HTML
<!-- #docplaster ... -->
|
|
<!-- #docregion -->
|
|
<div class="container">
|
|
<!-- #docregion edit-div -->
|
|
<div [hidden]="submitted">
|
|
<h1>Hero Form</h1>
|
|
<!-- #docregion ngSubmit -->
|
|
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
|
<!-- #enddocregion ngSubmit -->
|
|
<!-- #enddocregion edit-div -->
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<!-- #docregion name-with-error-msg -->
|
|
<input type="text" class="form-control" required
|
|
[(ngModel)]="model.name"
|
|
ngControl="name" #name="ngForm" >
|
|
<div [hidden]="name.valid" class="alert alert-danger">
|
|
Name is required
|
|
</div>
|
|
<!-- #enddocregion name-with-error-msg -->
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="alterEgo">Alter Ego</label>
|
|
<input type="text" class="form-control"
|
|
[(ngModel)]="model.alterEgo"
|
|
ngControl="alterEgo" >
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="power">Hero Power</label>
|
|
<select class="form-control" required
|
|
[(ngModel)]="model.power"
|
|
ngControl="power" >
|
|
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- #docregion submit-button -->
|
|
<button type="submit" class="btn btn-default"
|
|
[disabled]="!heroForm.form.valid">Submit</button>
|
|
<!-- #enddocregion submit-button -->
|
|
<!-- #docregion edit-div -->
|
|
</form>
|
|
</div>
|
|
<!-- #enddocregion edit-div -->
|
|
|
|
<!-- #docregion submitted -->
|
|
<div [hidden]="!submitted">
|
|
<h2>You submitted the following:</h2>
|
|
<div class="row">
|
|
<div class="col-xs-3">Name</div>
|
|
<div class="col-xs-9 pull-left">{{ model.name }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-3">Alter Ego</div>
|
|
<div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-3">Power</div>
|
|
<div class="col-xs-9 pull-left">{{ model.power }}</div>
|
|
</div>
|
|
<br>
|
|
<button class="btn btn-default" (click)="submitted=false">Edit</button>
|
|
</div>
|
|
<!-- #enddocregion submitted -->
|
|
</div>
|