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和Form的错误处理

在NGXS表单中，表单中有4个选项

模型/控制器
错误
肮脏
状态

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

@Query("{\"query\": { \"bool\": { \"must\": [ { \"match\": { \"user.id\": \"?0\" } }, { \"match\": { \"user.role\": \"?1\" } } ] } }}")
Profile customFindByIdRole(String id, String role);

现在在商店类中使用它选择器和减速器

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

在组件中将选择器与可观察的

一起使用

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

在组件

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

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

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

设置表格错误NGXS

2 个答案: