Angular NGRX/Observables 和 Reactive Forms

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

为了避免订阅商店并选择我的项目，我创建了一个指令来将我的可观察对象绑定到我的表单：

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">
</form>

我的问题是：

• 这是个好主意/有没有更好的方法来处理这个问题？

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

Answer 1

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

Answer 2

不，这对我来说似乎是一个不好的做法。表单应该是在父视图组件中使用的自己的组件。如果数据应该用于编辑，那么您可以使用 @Input 装饰器向其传递数据。

所以在你的父组件中你会做这样的事情：

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

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

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

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