4a9f7daf37
This commit removes all the docregion tags in examples that are not being referenced in any doc. PR Close #40479
83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<!-- #docregion -->
|
|
<div class="container">
|
|
|
|
<h1>Template-Driven Form</h1>
|
|
<!-- #docregion cross-validation-register-validator -->
|
|
<form #heroForm="ngForm" appIdentityRevealed>
|
|
<!-- #enddocregion cross-validation-register-validator -->
|
|
<div [hidden]="heroForm.submitted">
|
|
<div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
|
|
<div class="form-group">
|
|
<label for="name">Name</label>
|
|
<!-- #docregion name-with-error-msg -->
|
|
<!-- #docregion name-input -->
|
|
<input id="name" name="name" class="form-control"
|
|
required minlength="4" appForbiddenName="bob"
|
|
[(ngModel)]="hero.name" #name="ngModel" >
|
|
<!-- #enddocregion name-input -->
|
|
|
|
<div *ngIf="name.invalid && (name.dirty || name.touched)"
|
|
class="alert alert-danger">
|
|
|
|
<div *ngIf="name.errors.required">
|
|
Name is required.
|
|
</div>
|
|
<div *ngIf="name.errors.minlength">
|
|
Name must be at least 4 characters long.
|
|
</div>
|
|
<div *ngIf="name.errors.forbiddenName">
|
|
Name cannot be Bob.
|
|
</div>
|
|
|
|
</div>
|
|
<!-- #enddocregion name-with-error-msg -->
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="alterEgo">Alter Ego</label>
|
|
<input id="alterEgo" class="form-control" name="alterEgo"
|
|
#alterEgo="ngModel"
|
|
[(ngModel)]="hero.alterEgo"
|
|
[ngModelOptions]="{ updateOn: 'blur' }"
|
|
appUniqueAlterEgo>
|
|
|
|
<div *ngIf="alterEgo.pending">Validating...</div>
|
|
<div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
|
|
<div *ngIf="alterEgo.errors?.uniqueAlterEgo">
|
|
Alter ego is already taken.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- #docregion cross-validation-error-message -->
|
|
<div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
|
|
Name cannot match alter ego.
|
|
</div>
|
|
<!-- #enddocregion cross-validation-error-message -->
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="power">Hero Power</label>
|
|
<select id="power" name="power" class="form-control"
|
|
required [(ngModel)]="hero.power" #power="ngModel" >
|
|
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
|
</select>
|
|
|
|
<div *ngIf="power.errors && power.touched" class="alert alert-danger">
|
|
<div *ngIf="power.errors.required">Power is required.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-default"
|
|
[disabled]="heroForm.invalid">Submit</button>
|
|
<button type="button" class="btn btn-default"
|
|
(click)="heroForm.resetForm({})">Reset</button>
|
|
</div>
|
|
|
|
<div class="submitted-message" *ngIf="heroForm.submitted">
|
|
<p>You've submitted your hero, {{ heroForm.value.name }}!</p>
|
|
<button (click)="heroForm.resetForm({})">Add new hero</button>
|
|
</div>
|
|
</form>
|
|
</div>
|