2

私は Angular 2 アプリケーションを作成し、メンバーシップ システムに取り組んでいます。Register フォーム内に ControlGroup があり、そこには Password と 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("", "", "");
}

Password コントロールと ConfirmPassword コントロールのみを含む ResetPassword フォームがあります。次に、特にパスワードを変更できる AccountSettings ページもあり、この 2 つのフィールドは ControlGroup として、その他の多くのフィールド (姓名、電話番号など) と一緒に含まれています。これらの 2 つのフィールドは基本的に 3 つの場所すべてで同じであり、詳細な検証に関してはいくらか同じです。パスワードには、小文字、大文字、特別、数字などが含まれている必要があり、ConfirmPassword は一致する必要があります。これはすべて機能していますが、3 つの場所すべてでコードを繰り返しました。非常にウェットなアプローチ。

私がやりたいことは、このネストされた ControlGroup からコンポーネントを作成し、それを FromBuilder で使用して、より大きな ControlGroup に追加することだと思います。だから私の質問は...すべてをドライに保つために、これら2つのコントロールのみで構成されるコンポーネント/コントロールグループを別の場所に作成し、そのコンポーネント/コントロールグループをより大きなフォームのコントロールグループの一部として含める方法はありますか? 3 つの場所すべてで使用し、ロジックを 3 回繰り返さないでください。

4

1 に答える 1