angular - 我可以在多个 Angular2 表单中创建和重用 ControlGroup 组件吗

Question

我正在编写一个 Angular 2 应用程序并致力于成员(member)系统。我的注册表单中有一个控制组，其中包含密码和确认密码，以及各种登录信息。这个 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("", "", "");
}

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

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

Answer 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)
....