angular / angular/angular

Binding on input [type] is broken

Open
#13,243 46 comments 101 reactions 0 assignees View on GitHub
area: forms feature feature: under consideration freq2: medium state: blocked
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

**I'm submitting a ...**
```
[x] bug report => search github for a similar issue or PR before submitting
```

**Current behavior**
Try to bind the `type` attribute of input:

```js
// in Class
inputType="number"

// in html

```
Initially, the value is presented as number when doing `form.value`:

```js
{"integerB": 5}
```
Now, try to change the input's value.

**Its type has changed to string:**

```js
{"integerB": "5"}
```

while it seems the html attributes haven't changed:
```html
// chrome dev console

```

**Expected behavior**
If we *are* able to bind to [type], the input type should have stayed "number", so does the value.

**Minimal reproduction of the problem with instructions**
http://plnkr.co/edit/kp0xoDbZmJnD5orOTZUj?p=preview

**What is the motivation / use case for changing the behavior?**
I'm dynamiclly generating forms from given JSON, so binding to [type] can save a lot of copy-paste code.

**Please tell us about your environment:**
Not sure this is relevant as it is reproducible in plnkr.

Thanks.

**Edit**: same goes if binding [type] to `inputType="checkbox"`.
**Edit2**: this is also broken in the Dynamic Forms demo if you change "email" type to number (for example)

Contributor guide

Open the contributing guide

Research direction

Start with the linked Plunker reproduction and the Angular Dynamic Forms demo, then trace how the form value changes after editing an input whose type is bound through [type]. Done means dynamically bound number and checkbox inputs preserve the behavior and value types described in the expected behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.