更改ngForm字段值

Question

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

login(form: NgForm)

如果我尝试以下

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

但这不起作用

form.value.password = ''

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

Answer 1

但这不起作用

form.value.password = ''

因为form.value返回表单的值，它是AbstractControl的只读属性部分

来自angular2源代码

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

您可以将重置用于您的目的。

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

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

使用setValue或patchValue。

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

或者您可以为整个表单分配值

this.yourForm.setValue(data);

当在整个表单上使用setValue时，你有ro提供每个控件，否则它会抛出错误，如属性缺少paychValue，如果你只发送元素，另一只手可以处理。

Answer 2

您需要使用角形式控件/组上提供的setValue()或patchValue()方法，例如

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

请参阅docs here

Answer 3

不确定您是使用模板驱动还是模型驱动的表单。这适用于两者。

为此，请使用reset()，因此请重置该单一表单控件：

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

<强> DEMO with template-driven form