更改 ngForm 字段值

Question

当我提交表单时，我有这个功能

login(form: NgForm)

如果我尝试以下操作

console.log(form.value.password); // this works perfect.

但这行不通

form.value.password = ''

登录失败后我想重置密码字段。

Answer 1

您需要使用 angular 表单 controls/groups 上可用的 setValue() 或 patchValue() 方法，例如

form.patchValue({
  username: '', // or whatever fields you have
  password: ''
});

查看 docs here

Answer 2

但这行不通

form.value.password = ''

因为 form.value returns 您是表单的值，它是 AbstractControl

的只读 属性 部分

来自angular2源码

/**
 * The value of the control.
 */
readonly value: any;

您可以根据需要使用重置。

/** * 重置控件。抽象方法（在sub-类中实现）。 */

abstract reset(value?: any, options?: Object): void;

setValue 或 patchValue 的用法。

this.yourForm.controls['password'].setValue(password)

或者您可以为整个表单赋值

this.yourForm.setValue(data);

当在整个表单上使用 setValue 时，您必须提供每个控件，否则它会抛出错误，例如 属性 如果您仅在元素上发送，另一方面可以处理缺少的 paychValue。

Answer 3

不确定您使用的是模板驱动还是模型驱动表单。这对两者都有效。

只需使用 reset() 即可，因此请重置单个表单控件：

login(form) {
  // do whatever logic, and if login failed, reset like below
  form.controls.password.reset()
}

DEMO with template-driven form