Нажатие кнопки не обновляет значение angular formControlName - PullRequest
Новая
       27

Нажатие кнопки не обновляет значение angular formControlName

0 голосов
/ 19 марта 2020

У меня есть форма, которая имеет + и - для увеличения значения, а 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);
  }

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Правильный способ реализации должен быть:

  1. Во входной тег мы поместили #guestCapacity переменную ссылки на шаблон
  2. В кнопке минус мы получаем доступ к guestCapacity formcontrol, и уменьшить значение на 1
  3. . В кнопке «плюс» мы получаем доступ к справочной переменной guestCapacity formcontrol & template, чтобы увеличить значение на 1. 
<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">

        <!-- Get the guestCapacity formcontrol and decrease the value by 1 -->
        <button (click)="secondFormGroup.get('guestCapacity').setValue(guestCapacity?.value - 1)"
            class="minus"></button>
        <input #guestCapacity formControlName="guestCapacity" min="0" type="number" />

        <!-- Get the guestCapacity formcontrol and increase the value by 1 -->
        <button (click)="secondFormGroup.get('guestCapacity').setValue(guestCapacity?.value + 1)" class="plus"></button>
    </div>
</form>
0 голосов
/ 19 марта 2020

Ну, я не уверен насчет селектора запросов, и если он действительно работает, но позвольте мне дать вам другой подход.

Если вы хотите сослаться на узел в angular, вы можете использовать # или ref, вот так, 

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