56 lines
1.3 KiB
HTML
56 lines
1.3 KiB
HTML
<h1>Template reference variables</h1>
|
|
|
|
<div>
|
|
<h2>Pass value to an event handler</h2>
|
|
<p>See console for output.</p>
|
|
<!-- #docregion ref-phone -->
|
|
<!-- #docregion ref-var -->
|
|
<input #phone placeholder="phone number" />
|
|
<!-- #enddocregion ref-var -->
|
|
|
|
<!-- lots of other elements -->
|
|
|
|
<!-- phone refers to the input element; pass its `value` to an event handler -->
|
|
<button (click)="callPhone(phone.value)">Call</button>
|
|
<!-- #enddocregion ref-phone -->
|
|
</div>
|
|
|
|
<div>
|
|
<!-- #docregion ref-fax -->
|
|
<input ref-fax placeholder="fax number" />
|
|
<button (click)="callFax(fax.value)">Fax</button>
|
|
<!-- #enddocregion ref-fax -->
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div>
|
|
<h2>Template reference variable with disabled button</h2>
|
|
<p>btn refers to the button element.</p>
|
|
<button
|
|
#btn
|
|
disabled
|
|
[innerHTML]="'disabled by attribute: ' + btn.disabled"
|
|
></button>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<h2>Reference variables, forms, and NgForm</h2>
|
|
<!-- #docregion ngForm -->
|
|
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
|
|
<label for="name"
|
|
>Name <input class="form-control" name="name" ngModel required />
|
|
</label>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
|
|
<div [hidden]="!itemForm.form.valid">
|
|
<p>{{ submitMessage }}</p>
|
|
</div>
|
|
|
|
<!-- #enddocregion ngForm -->
|
|
|
|
|
|
<p>JSON: {{ itemForm.form.value | json }}</p>
|