将 FormGroup 放入类的最佳方法

Question

我是 Reactive Forms 的新手，我习惯使用模板驱动的表单。

我在这里学习教程：https://angular-templates.io/tutorials/about/angular-forms-and-validations

我有一个用户类：

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

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

我在一个组件中得到了我的 FormGroups：

 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'))
    });
  }

如您所见，有一个嵌套的formGroup 用于密码确认（检查两个密码是否相等）。

然后，当用户单击提交时，我想将我的 formGroup 值转换为我的用户对象。

我遵循了这里的建议：Reactive Forms correctly convert Form Value to Model Object

这里是我的提交方法：

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

但显然，使用嵌套密码formGroup 我没有this.newUser 中需要的内容：

{电子邮件：“test@test”matching_passwords：{密码：“Test1”， Confirm_password：“Test1”} 伪：“test” 术语：true}

我可以一一设置值，但对于较大的表单可能会很长。有什么方便的方法可以将formGroup 值设置为一个类并解决嵌套密码formGroup 的问题？我们应该如何实现这一目标？

最好的解决方案是让我的 User 对象准确反映 formGroups 结构，然后在我将对象发送到 API 时排除无用字段（如密码确认）？

另外，如果我的 User 类中有一个嵌套对象，比如说书籍集合，我应该如何转换嵌套的 FormGroups 以匹配类结构？

Answer 1

您可以为此使用解构。将此视为表单的价值：

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

你可以这样做：

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

更新

还有其他方法可以实现这一点。由于您的表单有一个不同的密码部分 (matching_passwords)，并且我认为您不想将其发送到您的 API 以保存它，因此我只使用了相关字段。

1234563里面）

1. 也可以使用展开操作符（...）展开表单值，然后将不相关的字段设置为null（最适合扁平结构的对象）

.

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