使用 jQuery 设置输入的值不起作用

Question

我正在尝试根据 Angular 中的另一个下拉列表值并使用 jQuery 设置下拉列表的值，它可以工作并且它会自动选择所需的值，但它不会在提交后将值添加到数据库中。我确信关于数据库连接的一切都很好，因为选择任何其他选定的值（例如本例中的欧元）都会添加到数据库中。

$(document).ready(function() {
  $("#country").change(function() {
    var val = $(this).val();
    if (val == "usa") {
      $("#currency").val("dollar");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form (ngSubmit)="onSubmit()">

<select id="country" name="country">
  <option value="usa">usa</option>
  <option value="france">france</option>
</select>

<select id="currency" name="currency">
  <option value="dollar">dollar</option>
  <option value="euro">euro</option>
</select>

<button type="submit" class="btn btn-primary">submit </button>

</form>

注意：Dollar 已被选中，但在提交时并未添加到数据库中，而如果我删除 jQuery 函数并手动选择货币，它会添加到数据库中，一切都很好。

Answer 1

jQuery 代码看起来不错……但我的问题是，你为什么要使用 jQuery 来更新 Angular 中的表单。

您是否评估过改用模板驱动或反应式表单？您可以在下面找到以模板驱动的形式编写的表单。

<form (ngSubmit)="onSubmit()">

    <select id="country" name="country" (change)="onCountryChange()" [(ngModel)]="selectedCountry">
      <option
        *ngFor="let country of countries"
        [value]="country">
        {{ country }}
      </option>
    </select>

    <select id="currency" name="currency" [(ngModel)]="selectedCurrency">
      <option
        *ngFor="let currency of currencies"
        [value]="currency">
        {{ currency }}
      </option>
    </select>

    <button type="submit" class="btn btn-primary">submit </button>

</form>

在这个plunkr 中，您可以找到使用模板驱动表单的完整示例...但是如果我在您所在的位置，我会采用反应式表单方法。