时间戳

首页 > 解决方案 > 按钮单击不更新角度 formControlName 值

angular - 按钮单击不更新角度 formControlName 值

问题描述

我有一个表单，它具有+并-用于增加值，并且当我使用这些按钮时 formControlName 不会更新，但在我手动输入时可以工作。如何解决这个问题？代码如下：

<form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Amenities</ng-template>
      <h5>How many guests can your place accomodate?</h5>
      <p class="textClass">
        Please specify the nuamber of guests your place can easily accomodate
        comfortably.
      </p>
      <div class="def-number-input number-input safari_only">
        <button
          onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
          class="minus"
        ></button>
        <input
          formControlName = "guestCapacity"
          min="0"
          type="number"
        />
        <button
          onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
          class="plus"
        ></button>
      </div>
</form>

我控制台记录了该值并使用订阅者查看它是否发生变化，但就像我之前所说的那样，它仅在我手动输入输入并且按钮没有任何效果时才有效。

submit() {
    console.log(this.secondFormGroup.controls.guestCapacity.value);
  }

标签： angulartypescriptformgroups

解决方案

好吧，我不确定查询选择器是否真的有效，但让我给你一个不同的方法。

如果你想以角度引用一个节点，你可以使用#or ref，像这样，

<button
  onclick="guestCapacity.stepDown()"
  class="minus"
></button>
<input #guestCapacity
  formControlName = "guestCapacity"
  min="0"
  type="number"
/>
<button
  onclick="guestCapacity.stepUp()"
  class="plus"
></button>

推荐阅读