Angular 角度5：如何在不同的组件中使用一个表单组？

下面的问题是关于角5的

---

我有一个表单组件

MyForm.form.ts

，它显示在多个父组件中。但是，有两个表单控件（我们称之为

代理机构电子邮件

和

交付详细信息

），只需要在两个父表单中显示，并且只需要在显示时进行验证。如何实现这一点？

您必须从父级传递要显示的

表单控件。然后在
表单中
组件
OnChange
钩子中，根据来自父级的输入，您可以更新验证

ngOnChanges(changes: SimpleChanges) {
    if (changes.availableOptions) {
        if (this.availableOptions.agency_email) {
            this.form.get("agency_email").setValidators([Validators.required]);
        } else {
            this.form.get("agency_email").setValidators([]);
        }
        this.form.get("agency_email").updateValueAndValidity();

        if (this.availableOptions.delivery_details) {
            this.form.get("delivery_details").setValidators([Validators.required]);
        } else {
            this.form.get("delivery_details").setValidators([]);
        }
        this.form.get("delivery_details").updateValueAndValidity();
    }
}

在
表单
组件中声明一个
@Input
，以捕获要显示的可用
firmControl

@Input() availableOptions: any = {
    agency_email: true,
    delivery_details: true
};

然后在
OnChange
中根据输入更新验证

ngOnChanges(changes: SimpleChanges) {
    if (changes.availableOptions) {
        if (this.availableOptions.agency_email) {
            this.form.get("agency_email").setValidators([Validators.required]);
        } else {
            this.form.get("agency_email").setValidators([]);
        }
        this.form.get("agency_email").updateValueAndValidity();

        if (this.availableOptions.delivery_details) {
            this.form.get("delivery_details").setValidators([Validators.required]);
        } else {
            this.form.get("delivery_details").setValidators([]);
        }
        this.form.get("delivery_details").updateValueAndValidity();
    }
}

并使用
html
中的
availableOptions
来
显示/隐藏
表单控件

下面是一个示例。
表单组件在使用它的地方被实例化。如果在两个不同的位置使用同一构件，则它是两个实例。只要你给它不同的表单组，它们就不会相互干扰。好吧，但问题是，有一个表单组，代表表单，在这个组中有控件，这需要有条件地验证。使用ngIf来连续显示其中一个？@EmilAvramov，问题是什么？条件验证意味着您的验证函数有+1个条件。。。。在这里，我做了一个示意图来说明我的意思。
MyForm.Form.ts
中必须有什么内容才能激活该按钮？