> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/forms.md).

# Forms

## Get User Input - $event

```javascript
src/app/keyup.components.ts

@Component({
  selector: 'app-key-up1',
  template: `
    <input (keyup)="onKey($event)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v1 {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}
```

The example above casts the `$event` as an `any` type. That simplifies the code at a cost. There is no type information that could reveal properties of the event object and prevent silly mistakes.

```javascript
onKey(event: KeyboardEvent) { // with type info
    this.values += (<HTMLInputElement>event.target).value + ' | ';
  }
```

The `$event` is now a specific `KeyboardEvent`. Not all elements have a value property so it casts target to an **input** element. The `OnKey` method more clearly expresses what it expects from the template and how it interprets the event.

> ## Passing $event is a dubious practice
>
> Passing the entire DOM event into the method: the component has too much awareness of the template details. It can't extract information without knowing more than it should about the HTML implementation.
>
> That breaks the separation of concerns between the template (what the user sees) and the component (how the application processes user data).
>
> \==> **Pass values, not elements**

## Get User Input - template reference variable (#)

```javascript
@Component({
  selector: 'app-loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
```

The template is completely self contained. It doesn't bind to the component, and the component does nothing.

> This **won't** work at all unless you bind to an **event**.
>
> Angular updates the bindings (and therefore the screen) **only** if the app does something in response to asynchronous events, such as keystrokes.
>
> This example code binds the keyup event to the number 0, the shortest template statement possible. While the statement does nothing useful, it satisfies Angular's requirement so that Angular will update the screen.

Here's a rewrite of the previous keyup example that uses a template reference variable to get the user's input.

```javascript
@Component({
  selector: 'app-key-up2',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v2 {
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }
}
```

A nice aspect of this approach is that the component gets clean data values from the view. It no longer requires knowledge of the `$event` and its structure.

## Key Event

* keyup : hears every keystroke
* keyup.enter : calls the event handler only when the user presses Enter
* blur : when the current state of the input box is lost

Hearing multiple events is available.

```markup
<input #box (keyup.enter)="update(box.value)" (blur)="update(box.value)">
```