将 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正确地将表单值转换为模型对象

这是我的提交方法：

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 类中有一个嵌套对象，例如 Books 的集合，我应该如何转换嵌套的 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 来保存它，所以我只选择了相关字段。

1. 如果您想直接利用表单中的数据，那么您必须以与value您的类定义相匹配的方式设计表单。（最适合其中包含嵌套对象的较大对象）

2. 您还可以使用展开运算符( ...) 展开表单值，然后将不相关的字段设置为null（最适合具有扁平结构的对象）

。

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