32

我在构建带有控件和选择框的动态 angular2 表单时遇到问题,例如这个plunker

    <select class="form-control" ngControl="power">
      <option *ngFor="#p of powers" [value]="p">{{p}}</option>
    </select>

你可以选择一个英雄的力量,并且控制将具有相同的价值。但是,如果您按下Change Powers,则选定的值将为空,但控制值仍然是旧值。我认为这是一个严重的问题,因为当表单显示一件事但实际上它会提交不同的内容时,这是很多错误的来源,有没有办法更新控件的内容?有,updateValue()但您必须在所有这些情况下手动设置该值。

也有类似的情况,当您在表单构建后更新选择框选项时,它会在选择框中显示一个选定值,而控件值将为空,关于如何处理这个问题的任何想法?

4

6 回答 6

33

在 Angular 2 Final (RC5+) 中有用于更新表单值的新 API。API 方法支持部分表单更新,patchValue()我们只需要指定一些字段:

this.form.patchValue({id: selected.id})

还有一个setValue()API 方法需要一个包含所有表单字段的对象。如果缺少字段,我们将收到错误消息。

于 2016-08-18T17:41:26.173 回答
25

更新

截至 angular2 语法的最新更新将是这样的

this.form.controls['power'].setValue('anthing here');
于 2016-12-09T07:44:08.603 回答
6

目前这是您唯一可以做的事情(如问题中所述)

this.form.controls['power'].updateValue(null);

有一个未解决的问题允许重置表单https://github.com/angular/angular/issues/4933

还有一个拉取请求,但这也允许您“手动”为每个控件“手动”设置它,还允许重置原始状态,触摸状态,...... https://github.com/angular/angular/pull/6679

于 2016-02-23T13:54:58.090 回答
5

[Angular 2稳定]

这是一种只使用 NgModel 的肮脏方式(并且没有导入其他表单构建器或表单组模块)

//
// set form field, "foo" value to "bar"
//

//
// view
//
<form #formRef="ngForm">
    <input name="foo" [(ngModel)]="foo"></input>
</form>

//
// controller
//
class {
    @ViewChild('formRef') form: NgModel;

    ngAfterViewInit() {
        setTimeout(() => {
          this.form['controls']['foo'].setValue('bar');
        });
    }
}
于 2017-01-02T15:01:56.983 回答
1

您可以尝试保持形式不可变。当您需要重置它时,您只需重建它。这样可以确保它是最新的。您还可以将值保存在某处并将表单重置为这些值。假设您正在编辑一个项目,当您重置时,您可以恢复为原始值,而不仅仅是一个空表单......

export class TheForm {
  public form: ControlGroup;
  public controls = (value: any = {}) => ({
    'id': [value.id],
    'name': [value.name, Validators.required]
  });

  constructor() {
    let values = some_values_from_database || {};
    this.build(values);
  }

  build(value) {
    this.form = this._builder.group(this.controls(value));
  }

  submit() {
    console.log(this.form.value);
  }
}

我已经创建了处理这种功能的基本表单@ngrx/store,这里是 Gist。当我需要不同模型的表单时,我会扩展BaseForm并只定义controlssubmit()方法,其余的都是继承的......

于 2016-02-23T14:45:58.660 回答
0

代码是:

(<FormControl>this.form.controls['power']).updateValue(data);
于 2016-09-12T16:14:23.220 回答