CODEWITHSUNDEEP
angulartypescriptangular-reactive-formsangular2-formbuilderangular-formbuilder
Nɪsʜᴀɴᴛʜ ॐ
Nɪsʜᴀɴᴛʜ ॐ

Reputation: 2914

Issue with passing objects from FormBuilder

As I'm trying to pass objects from formBuilder to another AbstractControl function of typescript file.

But not able to accomplish while passing data.

Stackblitz Here is the coding snippets

Main.component.ts

import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
import { PasswordStrengthValidator } from './PasswordStrengthValidator';

let obj = {};
obj.passwordLength  = 12;
obj.lowercaseNo     = 3;
...

this.passwordForm = this.formBuilder.group({
    password: new FormControl('', Validators.compose([
      Validators.required,
      Validators.minLength(obj.passwordLength),
      Validators.maxLength(30),
      PasswordStrengthValidator
    ])),
  }, {
    validators: this.password.bind(this)
  });
}

PasswordStrengthValidator.ts

import { AbstractControl, ValidationErrors } from '@angular/forms';

export const PasswordStrengthValidator = function (control: AbstractControl): ValidationErrors | null {
    console.log(obj); // object values needs to be displayed here
    ...
}

Is it possible to achieve replacing the above code to the main component itself or are there any better way to get around this issue

Upvotes: 0

Views: 185

Answers (1)

Guilhermevrs
Guilhermevrs

Reputation: 2369

You could use a factory:

<

export const PasswordStrengthValidatorFactory = (passObject: any) => {
  return function(control: AbstractControl): ValidationErrors | null {
    // In console required to display those values in the passObject
    console.log(passObject);

    return null;
  };
};

constructor(fb: FormBuilder) {
    console.log(this.passObject);
    this.myForms = fb.group({
      password: [null, Validators.compose([
        Validators.required, Validators.minLength(8), PasswordStrengthValidatorFactory(this.passObject)])]
    });

Link to stackblitz

Upvotes: 1

Related Questions