how to set a value to the input with out using ngmodel in angular 2+

Question

here i am using a typical input scenario where i can't use reactive/template form structure and ngmodel already assigned to other task. now i want to set a default value to the input fields and if user wants he can change the change

is it possible

<input id="{{data.name}}" value="{{data.name}}"  type="{{data.type}}" [(ngModel)]="Edit[data.name]" class="form-control">

mainly my issue setting value to the input fields & if user wants then he may change value to the individual fields or setting value to dynamic ngmodel

" and ngmodel already assigned to other task. now i want to set a default value". The only way I know is give value to your variable "Edit[data.name]" (well I supouse yo have an object data with default values) You can use placeholder to see a message like "enter name" — Eliseo
– Eliseo, Commented Oct 4, 2018 at 6:40

Patricio Vargas · Accepted Answer · 2018-10-04 04:50:22Z

2

Try this:

<input type="text"  [value]="data.name"/>

if you still need to way binding

<input type="text"  [value]="test"  [(ngModel)]="test"/>

edited Oct 4, 2018 at 4:50

answered Oct 4, 2018 at 4:47

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dexter Over a year ago

that didn't work for me and that why for setting value trying any alternative approach

Patricio Vargas Over a year ago

did you try with the [] ? in your question you have with without the brackets and using {{}}

Dexter Over a year ago

like i said ngmodel is already being used by another task and that to it is dynamic model [(ngModel)]="Edit[dataname]" i cant set value to this right

Patricio Vargas Over a year ago

if you want to set a value in the text without using anything else but the input field without using [(ngModel)] i dont think it can be done since ngModel is what makes the 2 way binding for us. If you can use like a button or something else then sure. Like an event or a button or something else @Dexter

Dexter Over a year ago

i found a way using the template reference and view child i can set value

|

Anjan Kumar GJ · Accepted Answer · 2018-10-04 04:54:12Z

0

using reference variable #inp

  OnInputClick(inp:any){   }//Typesctipt

<input id="{{data.name}}" value="{{data.name}}"  type="{{data.type}}" #inp class="form-control">
<button (click)="OnInputClick(inp.value)">Input</button>

edited Oct 4, 2018 at 4:54

answered Oct 4, 2018 at 4:50

Anjan Kumar GJ

815 bronze badges

1 Comment

Dexter Over a year ago

the fields are dynamic and i am not getting values i m setting the value

T. Shashwat · Accepted Answer · 2018-10-04 04:54:38Z

0

use keyup to capture event and store in .ts

 <input (keyup)="onKey($event)">

in .ts

"event.target.value"

have value entered by user , use it as you want

values ='' // provide a default value here whatever you want
onKey(event: any) { 
    this.values += event.target.value;
  }

answered Oct 4, 2018 at 4:54

T. Shashwat

1,16510 silver badges23 bronze badges

3 Comments

Dexter Over a year ago

have to set value please refer to my question

T. Shashwat Over a year ago

thats why defined values = "your value " in .ts

T. Shashwat Over a year ago

you can use {{values}} in your html displaying its result , if you want to display this in your input tag then there are attributes for input tag like [value] where you can assign this variable to display some value in input field. eg [value]= "values" // [value] an attribute and values a var defined in .ts.

mkHun · Accepted Answer · 2018-10-04 05:34:57Z

0

As per then Angular Document you can use the following code

<input  [value]="data.name" (input)="data.name=$event.target.value">

answered Oct 4, 2018 at 5:34

mkHun

5,9479 gold badges45 silver badges96 bronze badges

Comments

hello world · Accepted Answer · 2020-01-21 11:48:56Z

0

You could also use an on blur event

This updates the value whenever the user leaves the input field you started to edit.

example.html:

<input #tsVarName (blur)="addBlurVal(tsVarName.value)" >

example.ts

export class example {
    globalVal = "";

    addBlurVal(localVar) {
         this.globalVal = localVal;
    }
 }

answered Jan 21, 2020 at 11:48

hello world

3261 gold badge9 silver badges30 bronze badges

Collectives™ on Stack Overflow

how to set a value to the input with out using ngmodel in angular 2+

5 Answers 5

6 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related