Question

目前我有一个项目使用NGRX作为其商店和被动形式。

在我的应用程序中，我想将我的状态中的活动项映射到被动表单。所以在我的组件中我有类似的东西：

export class MyComponent {

    active$: Observable<any>;

    form = this.fb.group({
        name: ['', [Validators.required]],
        description: ['', Validators.maxLength(256)]
    });

    constructor(private fb: FormBuilder, private store: Store<any>) {
        this.active$ = store.select(store => store.items);
    }

}

为了避免订阅商店并选择我的商品，我创建了一个指令来将我的observable绑定到我的表单：

import { Directive, Input } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';

@Directive({
    selector: '[connectForm]'
})
export class ConnectFormDirective {

    @Input('connectForm')
    set data(val: any) {
        if (val) {
            this.formGroupDirective.form.patchValue(val);
            this.formGroupDirective.form.markAsPristine();
        }
    }

    constructor(private formGroupDirective: FormGroupDirective) { }

}

现在在我的表单中，我只需将其绑定：

<form [formGroup]="form" novalidate (ngSubmit)="onSubmit()" [connectForm]="active$ | async">

我的问题是：

这是一个好主意/是否有更好的方法来解决这个问题？

我认为在一天结束时，对于复杂的场景，您将不得不最终订阅组件中的observable。

Answer 1

您应该考虑将组件拆分为“已连接”和“演示”组件。您的连接组件将负责查询商店并向商店发出操作，您的演示组件将在其中创建表单组并接受来自商店的值作为@Input参数。然后，您可以在表示组件中的表单组中侦听值更改，并将具有更新值的事件提升到连接的组件。然后，已连接的组件将处理来自表示组件的事件，并引发新操作以更新商店中的值。

Answer 2

不，这对我来说似乎是一种不好的做法。表单应该是父视图组件中使用的自己的组件。然后，您可以使用@Input装饰器传递数据（如果它应该用于编辑）。

因此，在您的父组件中，您可以执行以下操作：

<form-component [data]="active$ | async"></form-component>

在表单组件中，您可以执行此操作：

ngOnInit{
    if(this.data)
        this.form.patchValue(this.data)
}

要使用ReactiveForms禁用表单控件，请使用disable方法。

Angular NGRX / Observables和Reactive Forms

2 个答案: