Невозможно отправить форму во второй раз угловой + ngrx - PullRequest
Новая
       16

Невозможно отправить форму во второй раз угловой + ngrx

0 голосов
/ 30 декабря 2018

У меня есть форма в угловом виде, я использую отправку действия для ее отправки.он подает в первый раз.У меня есть бэкэнд-валидация, которая проверяет некоторые требования поля и отвечает обратно на фронтэнд с ошибкой.Второй раз я хотел бы отправить форму после ввода правильного ввода.Но он не выполняет эффект, который отправляет / вызывает API для отправки значений формы.

HTML : 

<form [formGroup]="narForm" (ngSubmit)="onSubmit()">

  <mat-form-field>
          <mat-label for="narId" class="teal-txt">ID</mat-label>
          <input type="tel" minlength="8" maxlength="9" matInput formControlName="Id" required>

        </mat-form-field>

          <br>
          <mat-form-field>
            <mat-label for="email" class="teal-txt">Email Address</mat-label>
            <input type="email" matInput formControlName="email" required
              email>

          </mat-form-field>

  <div class="mt-5">
     <button type="submit" type="submit">Submit Form</button>
  </div>

component.ts is (отправить действие формы) 

onSubmit() {
    console.log('SUBMITTING THE FORM')
    this.isFormValid = true

    if (this.narForm.invalid) {
      console.log('Missing details in form submission')
      return
    }

    console.log('Submitting the form', viewQuoteFormFields)
    this.store.dispatch(new CartActions.Start())
  }

======================================

*. EFFECT.ts is 

@Effect() start$ = this.actions$
    .pipe(ofType(CartActionTypes.START))
    .pipe(withLatestFrom(this.store$))
    .pipe(map(([, state]) => {
      return {
        address: getCoveredAddress(state),
        ...selectQuoteForm(state),
        isNAR: 'true',
        isRE: 'true'
      } as ViewQuoteRequest
    }))
    .pipe(switchMap((request: ViewQuoteRequest) => this.api.cart(request)))
    .pipe(catchError(err => {
      console.log('Get Cart failed---+++--> ', err)
      this.oversizedPropetyError = err.error.error.errorKey
      if (this.oversizedPropetyError === 'over5kErrorMessage'
      || this.oversizedPropetyError === 'over10kErrorMessage') {
        this.store$.dispatch(new CartActions.ErrorHandler(this.oversizedPropetyError))
      } else {
        this.store$.dispatch(new CartActions.ErrorHandler(err))
      }
      return ([])
    }))
    .pipe(map(
      (result) =>
       new CartActions.GetCart(JSON.parse(result).cart),
       tap(result => console.log('++++++++++++++======+++++++++', result)
      )))

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

Вы должны отлавливать ошибки в «потоке API»

. 

pipe(
  switchMap((request: ViewQuoteRequest) => 
    this.api.cart(request)
     .pipe(catchError(...))
  )
)

Дополнительная информация: Безопасные вызовы HTTP с RxJS - от StrongBrew

0 голосов
/ 30 декабря 2018

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

onSubmit() {
  // TODO: Use EventEmitter with form value
  console.warn(this.profileForm.value);
}

Событие submit генерируется тегом формы с использованием собственного события DOM.Вы запускаете событие, нажимая кнопку с типом отправки.Это позволяет пользователю нажать клавишу Enter, чтобы отправить заполненную форму. 

updateProfile() {
  this.profileForm.patchValue({
    firstName: 'Nancy',
    address: {
      street: '123 Drew Street'
    }
  });
}

Вам необходимо обновить свою форму, чтобы работать после первого использования.Я также рекомендую использовать NgModel для привязки данных.

...