无法第二次提交表单 angular + ngrx

Question

我在 angular 中有表单，我正在使用调度操作来提交它。它是第一次提交。我有后端验证，它检查字段的某些要求并以错误响应前端。第二次我想在输入正确的输入后提交表单。但它不执行提交/调用 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 是（提交表单操作）

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 是

@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)
      )))

Answer 1

如果您提供项目的工作示例，会更容易提供帮助。让它发挥作用 here, so we can test it an see what's going on. I recommend that you take a look at angular reactive forms。

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

提交事件由使用本机 DOM 事件的表单标记发出。您可以通过单击具有提交类型的按钮来触发事件。这允许用户按 Enter 键提交完成的表单。

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

您需要更新表单才能在首次使用后继续操作。我还推荐使用 NgModel 进行数据绑定。

Answer 2

你必须在 "api stream"

上捕获错误

.

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

更多信息：Safe HTTP calls with RxJS - by StrongBrew

无法第二次提交表单 angular + ngrx

Unable to submit the the form the second time angular + ngrx

ngrx

angular

ngrx-store