предупреждение refre sh на реактивной форме angular 2 - PullRequest
Новая
       0

предупреждение refre sh на реактивной форме angular 2

0 голосов
/ 31 января 2020

Здравствуйте. Итак, у меня есть приложение angular 2. На моей странице регистрации у меня есть адрес для выставления счетов и доставки. При загрузке (ngOninit) форма доставки скрыта, адрес доставки будет отображаться только в том случае, если установлен флажок и скопированы значения (setValue) из фактуры. это означает, что наш клиент хочет другой адрес. Отсюда адрес доставки открывается / показывается и флажок снят. Теперь для меня странно то, что когда пользовательский ввод недействителен, скажем, электронное письмо и пытается отправить его, он обновляет форму и копирует значение из выставления счета, клиент теперь снова вводит адрес доставки.

вот фрагмент ts file: 

ngOnInit() {
    this.checkBoxDynamicValidator();
  }

onSubmit(event: Event) {
    event.preventDefault();
}

/**
   * this function sets up the validation for the shipping address
   * validation is controlled by the checkbox
   */
  private checkBoxDynamicValidator(): void {
    const changesCheckBox$ = this.companySignUpForm.get('checkBoxBilling')
      .valueChanges;
    const shipAddressAttrCtrl = this.companySignUpForm.get(
      'ship_address_attributes'
    ) as FormGroup;
    changesCheckBox$.subscribe((valOfCheckBox) => {
      this.populateShippingAddress(valOfCheckBox);
      if (valOfCheckBox) {
        this.clearCustomValidators(shipAddressAttrCtrl);
      } else {
        this.setCustomValidators(shipAddressAttrCtrl);
      }
    });
  }

/**
   * populate shipping address if checkbox "same as billing" is unchecked
   */
  private populateShippingAddress(isChecked: boolean): void {
    const shipAddGroup = this.companySignUpForm.get('ship_address_attributes');
    const billAddGroup = this.companySignUpForm.get('bill_address_attributes');
    // TODO: move to a helpers
    const selectedCountry = this.countries.find( country => Number(country.id) === Number(billAddGroup.value.country_id));
    this.setShippingState(selectedCountry.states);
    if (!isChecked) {
      shipAddGroup.setValue({
        firstname: billAddGroup.value.firstname,
        lastname: billAddGroup.value.lastname,
        address1: billAddGroup.value.address1,
        address2: billAddGroup.value.address2,
        city: billAddGroup.value.city,
        zipcode: billAddGroup.value.zipcode,
        phone: billAddGroup.value.phone,
        country_id: billAddGroup.value.country_id,
        state_id: billAddGroup.value.state_id
      });
    }
  }

changesCheckBox$.subscribe((valOfCheckBox) => {} этот код срабатывает каждый раз, когда на странице появляется ошибка или после отправки недействительной формы, даже если установленный флажок не нажат или не изменен. я могу предотвратить дефолт здесь? Я сделал предотвращение по умолчанию на отправке ничего не работает.

html фрагмент: 

<form novalidate [formGroup]="companySignUpForm">
   ... html here

   <button[disabled]="companySignUpForm.pristine ||companySignUpForm.invalid ||companySignUpForm.get('billingType').value !== 'creditCard'"
              (click)="onSubmit($event)">
        {{ 'register' | translate }}
   </button>
</form>

Есть идеи? Я чувствую, что это ошибка или что-то в этом роде. Хотя я не уверен, но это странное поведение. Я знаю, что valueChanges формирует Abstract Control, но я на самом деле не нажимаю и не нажимаю флажок. это действительно странно.

Кстати: форма «обновляется», а не страница.

1 Ответ

0 голосов
/ 01 февраля 2020

Привет, ребята, вот что я сделал. После наблюдения я только что понял, что флажок технически не является частью формы. Это просто кнопка переключения, чтобы скрыть и показать, поэтому перед отправкой произошла очистка, мы удаляем свойство checkbillingvalue, поэтому я изменил значение.

изменим ввод на этот. 

<input
 type="checkbox"
 id="test-checkbox"
 class="p-0 mr-3"
 [checked]="checkBoxValue"
 (change)="onCheckBoxEvent($event)"
 />

и сделал тот же лог c внутри метода onCheckBoxEven. Это рефакторинг из моей предыдущей работы. Я думал, что к каждому input или тегу, связанному с формой, нужно добавить formcontrol.

...