Best way to put FormGroup into a Class

Question

I'm new to Reactive Forms, I use to work with template driven forms.

I'm following the tutorial here: https://angular-templates.io/tutorials/about/angular-forms-and-validations

I have a User Class:

export class User {
  public pseudo: string;
  public email: string;
  public password: string;

  public constructor(init?: User) {
    Object.assign(this, init);
  }
}

And I got my FormGroups in a component:

 this.matching_passwords_group = new FormGroup(
      {
        password: new FormControl(
          '',
          Validators.compose([
            Validators.minLength(5),
            Validators.required,
            Validators.pattern(
              '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$'
            )
          ])
        ),
        confirm_password: new FormControl('')
      },
      (formGroup: FormGroup) => {
        return PasswordValidator.areEqual(formGroup);
      }
    );

    // user details form validations
    this.userDetailsForm = this.fb.group({
      pseudo: new FormControl('', Validators.required),
      email: new FormControl(
        '',
        Validators.compose([
          Validators.required,
          Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
        ])
      ),
      matching_passwords: this.matching_passwords_group,
      terms: new FormControl(false, Validators.pattern('true'))
    });
  }

As you can see there's a nested formGroup for password confirmation (to check that both password are equals).

Then when user clicks on submit I want to transform my formGroup values into my User object.

I followed what's recommended here: Reactive Forms correctly convert Form Value to Model Object

Here my submit method:

onSubmitUserDetails(value) {
    this.newUser = new User(this.userDetailsForm.value);
}

But obviously, with the nested password formGroup I don't have what I need in this.newUser:

{email: "test@test" matching_passwords: {password: "Test1", confirm_password: "Test1"} pseudo: "test" terms: true}

I could set values one by one but could be very long for bigger forms. Is there any handy way to set formGroup values into a class and solve problem with the nested password formGroup? How are we supposed to achieve that?

Is the best solution to have my User object reflecting exactly the formGroups structure, and then exclude useless fields (like password confirmation) when I send my object to the API?

Also what if I had a nested object in my User class, let say a collection of Books for instance, how am I supposed to transform nested FormGroups to match with the classes structure?

What's `pseudo` here? Also is it the same as `login` on your `User` class? — SiddAjmera, Oct 14 '18 at 16:19
Well, there is no magic in creating a class with a form value, except extracting the relevant property values and handling them in your constructor. So also, for example, if you had nested objects and you have them in the forms as well, you should extract them and them pass them to the constructor. e.g.: `const { user, pass, email } = this.formGroup.value; const user = new User({ user,pass,email });` — Dan R., Oct 14 '18 at 16:33

SiddAjmera · Answer 1 · 2018-10-14T17:45:54.117

You can use destructuring for this. Considering this as the value of your form:

{
  email: "test@test",
  matching_passwords: {
    password: "Test1",
    confirm_password: "Test1"
  },
  pseudo: "test",
  terms: true
}

You can do this:

onSubmitUserDetails(value) {
  const { email, pseudo } = value;
  const password = value.matching_passwords.password;
  const user = { pseudo, email, password }
  this.newUser = new User(user);
}

UPDATE

There are other ways to make this work as well. Since your form had a different section for passwords(matching_passwords), and I assumed that you didn't want to send that to your API to save it I just took the relevant fields.

If you want to leverage the data directly from your form, then you would have to design your form in such a way, that it's value matches your Class definition.(best suited for bigger objects with nested objects inside them)
You could also use the spread operator(...) to spread out the form value and then set the irrelevant fields to null(best suited for Objects with flat structure)

.

onSubmitUserDetails(value) {
  let user = {...value};
  user.password = value.matching_passwords.password;
  user.matching_passwords = null;
  user.terms = null;
  this.newUser = new User(user);
}

Yes it can be a way but for some other bigger objects with nested objects it would be very tedious. Actually I'm surprised that there's nothing automatic built-in, as I suppose that for 99% of angular app with forms, the purpose is to send data through an API to save it. Or maybe my mistake is to use User object? Maybe other apps pass the formGroup directly to the service, and manage business rules directly with formGroup data? — Lempkin, Oct 14 '18 at 17:20

Best way to put FormGroup into a Class

1 Answers1

UPDATE