Question

我有棱角分明的表单，我正在使用分派动作来提交它。它是第一次提交。我有后端验证，该验证检查该字段的某些要求，并以错误响应返回前端。输入正确的输入后，我想第二次提交表单。但是它不执行提交/调用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

您必须在“ api流”中捕获错误

。

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

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

Answer 2

如果您提供一个可行的项目示例，将更容易获得帮助。使它工作here，以便我们对其进行测试以查看发生了什么。我建议您看看angular reactive forms。

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

表单标签使用本机DOM事件发出Submit事件。通过单击提交类型的按钮来触发事件。这样，用户可以按Enter键提交完整的表单。

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

您需要更新表格才能使用首次使用。我还建议使用NgModel进行数据绑定。

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

2 个答案: