如何从 Angular 响应式表单中删除字段？答案

【问题标题】：How to remove a field from a Angular Reactive Form?如何从 Angular 响应式表单中删除字段？
【发布时间】：2020-03-10 08:34:23
【问题描述】：

我要发送到 Api 的 Angular 表单有 4 个字段：用户名、电子邮件、密码和确认密码。我只想向 APi 发送其中三个：用户名、电子邮件和密码。

任何想法如何从对象中删除确认密码？

谢谢！

这是对象的样子：

this.registerForm = this.formBuilder.group({
        username:        ['', Validators.required],
        email:           ['', [Validators.required, Validators.email]],
        password:        ['', [Validators.required, Validators.minLength(6)]],
        confirmpassword: ['', [Validators.required]]
    }, {
        validator: MustMatch('password', 'confirmpassword')
    });
}

这是我现在发送给 APi 的对象：

this.userService.registerUser(JSON.stringify(this.registerForm.getRawValue()))

【问题讨论】：

标签： json angular rest api angular-reactive-forms

【解决方案1】：

您可以删除该对象的属性。为了安全起见，首先制作对象的副本。

const formCopy = Object.assign({}, this.registerForm.getRawValue()); // copy form object
delete formCopy.confirmpassword; // delete property

this.userService.registerUser(JSON.stringify(formCopy));

【讨论】：

【解决方案2】：

您可以使用删除运算符删除对象中的字段。

let formObj = this.registerForm.getRawValue();

delete formObj.confirmpassword;

this.userService.registerUser(JSON.stringify(formObj))

【讨论】：

【解决方案3】：

你可以使用如下的模型绑定

创建注册模型

export class RegisterModel {
    username: string;
    email: string;
    password: string;
}

使用此注册模型绑定将正文发送到您的 API

    this.model = new RegisterModel();
    this.model.username= this.registerForm.controls['username'].value;
    this.model.email= this.registerForm.controls['email'].value;
    this.model.password= this.registerForm.controls['password'].value;

现在将此模型发送到您的 API

this.userService.registerUser(this.model)

【讨论】：

【解决方案4】：

我认为不需要删除表单控件。您可以从表单中获取的对象中删除该属性。另外我认为没有必要使用getRawValue()，因为您没有禁用字段。所以在提交时我建议：

onSubmit() {
  delete this.registerForm.value.confirmpassword;
  // ...
}

或者您可以在提交时传递表单的值：

(ngSubmit)="onSubmit(registerForm.value)"

和功能：

onSubmit(values) {
  delete values.confirmpassword;
  // ...
}

如果你正在做一个http请求，你不需要对值进行字符串化，只需将它作为一个对象传递。

【讨论】：

【解决方案5】：

有一个禁用属性可以做到这一点，让我告诉你怎么做：

假设这是您的提交方法，在将其发送到 API 之前，我将使用 disable 属性删除密钥。

public submitForm(): void {
    this.registerForm.get('confirmpassword').disable();
    console.log(this.registerForm.value)
}

在控制台中，我将获得三个属性，这里有一个 stackblitz 供您检查，现在就完成了： https://stackblitz.com/edit/remove-key-reactive-forms

【讨论】：