Angular 9 ngModel 未清除默认选择答案

【问题标题】：Angular 9 ngModel not clearing default selectionAngular 9 ngModel 未清除默认选择
【发布时间】：2020-07-01 09:27:12
【问题描述】：

我正在尝试根据另一个组件的状态自动填充文本框。哪个工作正常。但是当我在提交表单时将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 时，它不会显示出来。

有人可以帮忙吗？

【问题讨论】：

标签： javascript angular typescript

【解决方案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(.ts) 中进行更改时，它都会反映在 View(html) 中，而当您在 View 中进行更改时，它将反映在 Model 中。

这会立即自动发生，确保 HTML 模板和 TypeScript 代码随时更新。

【讨论】：

【解决方案2】：

ngModel 创建双向绑定。在您的情况下，您的组件中可能没有 stopName 属性，这就是为什么当您添加 NgModel 时会得到空输入字段的原因。在这种情况下，您的代码是多余的，value 和 ngModel 都尝试设置输入值。

尝试删除 value 并将现有属性设置为 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

【讨论】：