Add mock class for Form Builder group in Angular

Question

I´m creating a lot of new forms like, for example:

  constructor(private formBuilder: FormBuilder) {

    this.userForm = this.formBuilder.group({
      'name': ['', Validators.required],
      'email': ['', [Validators.required, ValidationService.emailValidator]],
      'profile': ['', [Validators.required, Validators.minLength(10)]]
    });
  }

Instead of declare this new values directly, should not be a better approach to create class with this info like something:

export class UserValidator{
  something....
}

and then:

 this.userForm = this.formBuilder.group({
      UserValidator
    });

There is any example for this?

Answer 1

You can create a class for that :

export class User {
  name: string;
  email: string;
  profile: string;

  toFormGroup() {
    return {
      name: [this.name, Validators.required],
      email: [this.email, [Validators.required, ValidationService.emailValidator]],
      profile: [this.profile, [Validators.required, Validators.minLength(10)]]
    };
  }
}

Now you can use it like this :

const user = new User();
user.name = 'John Doe';
this.form = this.fb.group(user.toFormGroup());