CODEWITHSUNDEEP
angulartypescript
Dexter
Dexter

Reputation: 528

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

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

Upvotes: 3

Views: 11615

Answers (5)

hello world
hello world

Reputation: 316

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;
    }
 }

Upvotes: 0

mkHun
mkHun

Reputation: 5921

As per then Angular Document you can use the following code

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

Upvotes: 0

T. Shashwat
T. Shashwat

Reputation: 1165

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;
  }

Upvotes: 0

Anjan Kumar GJ
Anjan Kumar GJ

Reputation: 81

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>

Upvotes: 0

Patricio Vargas
Patricio Vargas

Reputation: 5522

Try this:

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

if you still need to way binding

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

Upvotes: 2

Related Questions