Angular动态新增文本框残留旧值，如何实现空白初始化？

我来帮你搞定这个问题！你遇到的核心问题是所有新增的输入框都绑定到了同一个全局变量上，导致之前填写的值会被保留下来。咱们一步步修改，让新增的文本框每次都是空白的：

问题根源 #

你当前的代码里，新增的输入框绑定的是$ctrl.inputDesiredAmount和$ctrl.inputCreditLimit这两个全局变量——不管你点多少次添加，用的都是同一个变量，旧值自然会留在里面。正确的做法是给每一组新增的详情创建一个独立的临时对象，而不是复用同一个变量。

第一步：修改控制器代码 #

首先在你的组件控制器里，替换掉原来的单个input变量，改用一个临时对象来存储新增的空白详情：

// 定义临时对象，专门用来存新增的空白详情
public tempNewDetail: app.domain.detailsCriteriaModel = new app.domain.detailsCriteriaModel('', '');

// 取消编辑/添加时，重置临时对象为空白
public stopEditingOrAdding(): void {
  this.isEditingDetails = false;
  this.addingAnotherSetOfDetails = false;
  // 重置临时对象，确保下次新增是空白的
  this.tempNewDetail = new app.domain.detailsCriteriaModel('', '');
}

// 保存新增的详情
public saveDetailsForClients(isFormValid: boolean): void {
  if (!isFormValid) {
    return;
  }
  // 将临时对象的内容拷贝到新实例，避免引用问题
  const newDetail = {...this.tempNewDetail};
  this.detailsCriteria.push(newDetail);
  // 重置临时对象
  this.tempNewDetail = new app.domain.detailsCriteriaModel('', '');
  this.isEditingDetails = false;
  this.addingAnotherSetOfDetails = false;
}

// 新增：触发添加时初始化临时对象（如果你的添加按钮是直接设置addingAnotherSetOfDetails，就把这个逻辑加进去）
public startAddingAnother(): void {
  this.addingAnotherSetOfDetails = true;
  this.tempNewDetail = new app.domain.detailsCriteriaModel('', '');
}

第二步：修改HTML模板 #

把新增文本框的ng-model绑定到临时对象的属性上，而不是原来的全局变量：

找到ng-if="$ctrl.addingAnotherSetOfDetails"的那个表格，修改input的绑定：

<table class="table" ng-if="$ctrl.addingAnotherSetOfDetails">
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <input name="desiredAmount" ng-model="$ctrl.tempNewDetail.desiredAmount" type="text" class="form-control" yl-account-address-text ng-minlength="3" ng-maxlength="30">
        <div data-ng-click="$ctrl.deletedesiredAmount()"></div>
      </td>
      <td>
        <input name="creditLimit" ng-model="$ctrl.tempNewDetail.creditLimit" type="text" class="form-control" yl-account-address-text ng-minlength="3" ng-maxlength="30">
        <div data-ng-click="$ctrl.deleteCreditLimit()"></div>
      </td>
    </tr>
  </tbody>
</table>

另外，你原来的编辑已有项的代码也有问题——绑定的是全局变量，会导致所有编辑框同步变化。顺便把这部分也改了，直接绑定到循环的criteria对象上，还要给input的name加索引避免重复：

<table class="table" ng-if="$ctrl.clientDetails.length > 0">
  <thead>
    <tr>
      <td><b>Desired Amount</b></td>
      <td><b>Credit Limit</b></td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="criteria in $ctrl.clientDetails track by $index">
      <td ng-if="!$ctrl.isEditingDetails">{{criteria.desiredAmount}}</td>
      <td ng-if="$ctrl.isEditingDetails && !$ctrl.addingAnotherSetOfDetails">
        <input name="desiredAmount_{{$index}}" ng-model="criteria.desiredAmount" type="text" class="form-control" yl-account-address-text ng-minlength="3" ng-maxlength="30">
        <div data-ng-click="$ctrl.deleteDetail($index)"></div>
      </td>
      <td ng-if="!$ctrl.isEditingDetails">{{criteria.creditLimit}}</td>
      <td ng-if="$ctrl.isEditingDetails && !$ctrl.addingAnotherSetOfDetails">
        <input name="creditLimit_{{$index}}" ng-model="criteria.creditLimit" type="text" class="form-control" yl-account-address-text ng-minlength="3" ng-maxlength="30">
        <div data-ng-click="$ctrl.deleteDetail($index)"></div>
      </td>
    </tr>
  </tbody>
</table>

为什么这样改？ #

1. 临时对象隔离状态：每次新增时都初始化一个空白的tempNewDetail，确保新增的输入框不会带上之前的值；保存或取消后再重置这个对象，为下一次新增做好准备。
2. 编辑绑定到对应项：编辑已有详情时，直接绑定到循环中的criteria对象，修改的是当前项的数据，不会影响其他行或新增框。
3. 避免表单验证冲突：给编辑框的name加上_{{$index}}，确保每个input的name唯一，不会触发不必要的表单验证错误。

内容的提问来源于stack exchange，提问作者Eleven