Angular 9 ngModel 未清除默認選擇

Question

我正在嘗試根據來自另一個組件的 state 自動填充文本框。 哪個工作正常。 但是當我 go 將 ngModel 添加到文本框中以在提交表單時獲取值。 該值被清除並且不向用戶顯示。

<div *ngIf="autoFill; else noFillMode" class="row">
  <label>Mode of Transport</label>
  <input type="text" value="{{state.type}}" readonly />
</div>

<div *ngIf="autoFill; else noFillStop" class="row">
  <label>Nearby Stop / Station</label>
  <input
    type="text"
    value="{{state.stopName}}"
    [(ngModel)]="stopName"
    readonly
  />
</div>

正如您在圖像中看到的那樣，當輸入中沒有放置 ngModel 時，文本會顯示出來。 但是當有一個 ngModel 時，它不會顯示出來。

有人能幫忙嗎？

Answer 1

對兩個文本框都使用 [(ngModel)]

 <div *ngIf="autoFill; else noFillMode" class="row">
        <label>Mode of Transport</label>
        <input type="text" [(ngModel)]="state.type" readonly>
    </div>
        
    <div *ngIf="autoFill; else noFillStop" class="row">
        <label>Nearby Stop / Station</label>
        <input type="text"  [(ngModel)]="state.stopName" readonly>
    </div>

注意： [(ngModel)]用於雙向綁定，它將數據從組件更新到視圖，反之亦然。

在雙向數據綁定中，數據的自動同步發生在 Model 和 View 之間。 在這里，變化反映在兩個組件中。 每當您在 Model(.ts) 中進行更改時，它將反映在 View(html) 中，當您在 View 中進行更改時，它將反映在 Model 中。

這會立即自動發生，確保 HTML 模板和 TypeScript 代碼隨時更新。

Answer 2

ngModel 創建雙向綁定。 在您的情況下，您的組件中可能沒有stopName屬性，這就是為什么當您添加 NgModel 時您會得到空的輸入字段。 在這種情況下，您的代碼是多余的， value 和 ngModel 都嘗試設置輸入值。

嘗試刪除值並將現有屬性設置為 ngModel。

    <div *ngIf="autoFill; else noFillMode" class="row">
      <label>Mode of Transport</label>
      <input type="text" value="{{state.type}}" readonly>
    </div>

   <div *ngIf="autoFill; else noFillStop" class="row">
     <label>Nearby Stop / Station</label>
     <input type="text" [(ngModel)]="state.stopName" readonly>
   </div>

您還可以嘗試使用FormControl ，它提供了設置、獲取、清除、檢查有效性的選項，......來自特定 formControl 或整個表單的值。

這是StackBlitz中的一個小實現不要忘記導入 ReactiveFormModule