Question

我正在撰写Angular 2应用程序并致力于会员系统。我的注册表单中有一个ControlGroup，其中包含一个密码和一个ConfirmPassword，上面有各种登录信息。此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表单，其中仅包含Password和ConfirmPassword控件。然后我还有一个AccountSettings页面，除此之外，你可以更改你的密码，它有这两个字段作为ControlGroup以及许多其他字段，即名字和姓氏，电话号码等...这两个领域在所有三个地方基本相同，并且有点深入验证。密码必须包含lower，upper，special和数字等，并且ConfirmPassword必须匹配。我已经完成了所有这些工作，但我已经在所有三个地方重复了这些代码;非常WET的方法。

我想我想要做的是从这个嵌套的ControlGroup中创建一个Component，并在FromBuilder中将它添加到更大的ControlGroup中。所以我的问题是......为了保持一切干燥，有没有办法创建一个只包含这两个控件的Component / ControlGroup，然后将Component / ControlGroup作为更大表单的一部分包含在内＃39 ;因此，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)
....

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

1 个答案: