# 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)">
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fancyloves.gitbook.io/frontendtech/angularjs/forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.