设置表单错误NGXS

Question

如何在NGXS中设置表单错误。我看到插件中有UpdateFormErrors操作，但是没有关于如何使用它的文档。

我尝试了以下几种方法：

  const errors = {
      errors: response.error,
      path: "product.productForm.name"
    }

    dispatch(new UpdateFormErrors(errors));

但也不乏。错误未绑定到表单中。

我的HTML：

<form [formGroup]="form" ngxsForm="product.productForm" class="m-t">
    <fieldset class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Name:</label>
            <div class="col-sm-10"><input formControlName="name" type="text" class="form-control" placeholder="Enter product name"></div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Price:</label>
            <div class="col-sm-10"><input formControlName="price" type="text" class="form-control" placeholder="0.00"></div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Description:</label>
            <div class="col-sm-10">
                <textarea formControlName="description" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2 col-md-offset-2">
                <button (click)="onSubmit()" type="button" class="btn btn-primary block full-width m-b" data-style="expand-right">Submit</button>
                <button (click)="sample()" type="button" class="btn btn-primary block full-width m-b" data-style="expand-right">Sample</button>
            </div>
        </div>
    </fieldset>
</form>

如何设置表单错误？

谢谢!

Answer 1

据我所知，在表单插件的source code中，应该使用UpdateFormErrors来处理表单级别的错误。

所以至少你应该使用path: "product.productForm"而不是path: "product.productForm.name"。

如果您希望使用表单控件的数据填充处于表单状态的errors容器，this issue似乎与您的问题相关。

Answer 2

使用NGXS和表单处理错误

在NGXS表单中有4个选项

1. 型号/ controlers
2. error
3. dirty
4. status

创建一个名为productStatModel的类，并像这样使用它

productForm : {
 model:  undefined;
    dirty : false;
    status : '';
    errors: : null;
 }

现在在store类中使用它的选择器和减法器

@Selector()
static productErrors(state: productStateModel) { return 
state.productForm.errors; }

在组件中将选择器与observable一起使用

@Action(ProductAction.update)
login(ctx: StateContext<AuthStateModel>) {
    return this.updateService.update(productForm.model).pipe(
        tap((resp) => {
            ctx.patchState({
                // on success add what you want
            });

        }),
        catchError((err) => {
            // in case of Backend required error
            ctx.setState({
                ...state,
                productForm: {
                    ...state.producForm,
                    errors: err,
                }
            });
            throw err;
        })
    );
}

At组件

@Select(ProductState.productErrors) errors$: Observable<any>;

现在在HTML绑定中使用可观察到的错误

<div>{{(error$ | async).name}}</div>