首页 文章

Angular2更新表单控件值

提问于
浏览 次
20

我在使用控件和选择框构建动态angular2表单时遇到问题，例如plunker：

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

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

在表单构建之后更新selectbox选项时也会出现类似的情况，它会在selectedbox中显示一个选定的值，而控件值将为null，有关如何处理此问题的任何想法？

angular angular2-forms

6 回答

  • 1

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

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

    还有 setValue() API方法需要具有所有表单字段的对象 . 如果缺少某个字段，我们将收到错误消息 .

    回复于
  • 21

    更新

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

    this.form.controls['power'].setValue('anthing here');
    回复于
  • 4

    目前这是你唯一可以做的事情（如问题中所述）

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

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

    还有一个拉取请求，但也允许你为每个控件"manually"，但也允许重置状态，如原始，触摸，... https://github.com/angular/angular/pull/6679

    回复于
  • 10

    [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');
        });
    }
}
    回复于
  • 5

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

    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 创建了处理这种功能的基本表单，这里是the Gist . 当我需要一个不同模型的表单时，我将扩展 BaseForm 并只定义 controls 和 submit() 方法，其余的继承...

    回复于
  • 0

    代码是：

    (<FormControl>this.form.controls['power']).updateValue(data);
    回复于

相关问题