Question

我有一个具有 + 和-的表单，用于增加值，并且当我使用这些按钮时，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);
  }

Answer 1

我不确定查询选择器是否正确，但是让我给您一种不同的方法。

如果要按角度引用节点，可以使用#或ref，

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

Answer 2

正确的实施方式应为：

在输入标签中，我们放置了console.log(L)模板参考变量
在减号按钮中，我们访问#guestCapacity窗体控件，并将值减小1
在加号按钮中，我们访问guestCapacity formcontrol和模板引用变量以将值增加1。

guestCapacity

单击按钮不更新角度formControlName值

2 个答案: