CODEWITHSUNDEEP
angularangular2-forms
Coaden
Coaden

Reputation: 466

Can I create and reuse a ControlGroup Components in multiple Angular2 forms

I'm writing an Angular 2 application and working on the membership system. I have a ControlGroup within my Register form that include a Password and a ConfirmPassword, with all sorts of login on them. There's also an email Control on this ngForm.

Here's the constructor code showing the form's Controls and the FormBuilder usage. There's more code to generate error messages, etc further on.

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("", "", "");
}

I have a ResetPassword form that includes ONLY the Password and ConfirmPassword Controls. Then I also have an AccountSettings page where, among other things, you can change your password, and it has these two fields as a ControlGroup along with many other fields, i.e. first and last name, phone number, etc... The logic on these two fields are basically the same in all three places, and somewhat in depth validation wise. They Password must contain a lower, upper, special, and a number, etc and the ConfirmPassword must match. I have all this working, but I've repeated the code in all three places; a very WET approach.

I guess what I want to do is create a Component out of this nested ControlGroup and use that in FromBuilder adding it to a larger ControlGroup. So my question is... in the interest of keeping everything dry, is there a way to create a Component / ControlGroup that consist of only these two Controls somewhere separate, and then include that Component / ControlGroup as part of a larger form's ControlGroup thus using it in all three locations and not repeating the logic three times.

Upvotes: 2

Views: 625

Answers (1)

Sasxa
Sasxa

Reputation: 41314

You can setup individuals control in one file (or one file each), then import them where you need and use addControl() method of the ControlGroup, something like this:

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

Upvotes: 3

Related Questions