如何在 angular 2+ 中不使用 ngmodel 為輸入設置值

Question

在這里，我使用了一個典型的輸入場景，我不能使用反應式/模板表單結構和已經分配給其他任務的 ngmodel。 現在我想為輸入字段設置一個默認值，如果用戶願意，他可以更改更改

是否可以

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

主要是我的問題為輸入字段設置值&如果用戶想要，那么他可以將值更改為單個字段或將值設置為動態ngmodel

Answer 1

嘗試這個：

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

如果你仍然需要方式綁定

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

Answer 2

根據當時的 Angular 文檔，您可以使用以下代碼

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

Answer 3

使用參考變量#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>

Answer 4

使用 keyup 捕獲事件並存儲在 .ts 中

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

在.ts

“事件.目標.值”

有用戶輸入的值，根據需要使用它

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

Answer 5

您還可以使用on blur 事件

每當用戶離開您開始編輯的輸入字段時，這都會更新值。

示例.html：

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

例子.ts

export class example {
    globalVal = "";

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