我可以在多个 Angular 2 表单中创建和重用控制组组件吗答案

【问题标题】：Can I create and reuse a ControlGroup Components in multiple Angular2 forms我可以在多个 Angular 2 表单中创建和重用控制组组件吗
【发布时间】：2016-06-14 03:58:28
【问题描述】：

我正在编写一个 Angular 2 应用程序并致力于会员系统。我的注册表单中有一个控制组，其中包括一个密码和一个确认密码，上面有各种登录信息。此 ngForm 上还有一个电子邮件控件。

这是显示表单控件和 FormBuilder 用法的构造函数代码。还有更多代码可以生成错误消息等。

private _passwordValidators = new CustomValidators();

constructor(private _membershipService: MembershipService,
            private _logger: Logger,
            private _fb: FormBuilder) {

   this.emailCtrl = new Control('', Validators.compose([
            Validators.required,
            this._passwordValidators.validEmailLoose
       ]));

   this.passwordCtrl = new Control('', Validators.compose([
            Validators.required,
            Validators.minLength(this.minPasswordLength),
            this._passwordValidators.needsCapitalLetter,
            this._passwordValidators.needsLowerLetter,
            this._passwordValidators.needsNumber,
            this._passwordValidators.needsSpecialCharacter
       ]));

   this.confirmPasswordCtrl = new Control('', Validators.compose([
            Validators.required
       ]));

    this.registerForm = _fb.group({
        'email': this.emailCtrl,
         'matchingPassword': _fb.group({
            'password': this.passwordCtrl,
            'confirmPassword': this.confirmPasswordCtrl
        }, {validator: this._passwordValidators.areEqual})

    });

   this.registerViewModel = new RegisterViewModel("", "", "");
}

我有一个仅包含 Password 和 ConfirmPassword 控件的 ResetPassword 表单。然后我还有一个 AccountSettings 页面，除其他外，您可以更改密码，它有这两个字段作为 ControlGroup 以及许多其他字段，即名字和姓氏、电话号码等......这两个字段在所有三个地方都基本相同，并且在深度验证方面有所不同。它们的密码必须包含小写、大写、特殊和数字等，并且 ConfirmPassword 必须匹配。我已经完成了所有这些工作，但是我在所有三个地方都重复了代码；一种非常 WET 的方法。

我想我想做的是从这个嵌套的 ControlGroup 中创建一个组件，并在 FromBuilder 中使用它，将它添加到一个更大的 ControlGroup 中。所以我的问题是......为了保持一切干燥，有没有办法创建一个仅由这两个单独的控件组成的组件/控制组，然后将该组件/控制组作为更大表单的控制组的一部分包含在内在所有三个位置都使用它，并且不重复逻辑三次。

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

您可以在一个文件（或每个文件）中设置个人控件，然后将它们导入您需要的位置并使用ControlGroup 的addControl() 方法，如下所示：

// controls.ts

   export var emailCtrl = new Control('', Validators.compose([
            Validators.required,
            this._passwordValidators.validEmailLoose
       ]));

   export var passwordCtrl = new Control('', Validators.compose([
            Validators.required,
            Validators.minLength(this.minPasswordLength),
            this._passwordValidators.needsCapitalLetter,
            this._passwordValidators.needsLowerLetter,
            this._passwordValidators.needsNumber,
            this._passwordValidators.needsSpecialCharacter
       ]));

   export var confirmPasswordCtrl = new Control('', Validators.compose([
            Validators.required
       ]));

// form.ts
import {emailCtrl} from 'controls.ts'


this.registerForm = _fb.group({
    'someOtherControl: [],
});
this.registerForm.addControl("email", emailCtrl)
....

【讨论】：