Angular2 значение контроля формы обновления

У меня возникла проблема с созданием динамических форм angular2 с элементами управления и выборами, например, этот plunker:

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

Вы можете выбрать мощность героя, и элемент управления будет иметь такое же значение. Но если вы нажмете Change Powers, выбранное значение будет нулевым, но контрольное значение все еще является старым значением. Это серьезная проблема, я думаю, поскольку это источник множества ошибок, когда форма показывает одну вещь, но на самом деле она представит что-то другое, есть ли способ обновить содержимое элемента управления? Существует updateValue(), но вы должны вручную установить значение во всех этих случаях.

Существует также аналогичный случай, когда вы обновляете опции selectbox после построения формы, он отображает выбранное значение в выбранном поле, тогда как контрольное значение будет null, любые идеи о том, как с этим справиться?

Ответ 1

В Angular 2 Final (RC5 +) появились новые API для обновления значений форм. Метод API patchValue() поддерживает частичные обновления формы, где нам нужно только указать некоторые из полей:

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

Существует также метод API setValue(), которому нужен объект со всеми полями формы. Если отсутствует поле, мы получим сообщение об ошибке.

Ответ 2

Update

с момента последнего обновления синтаксиса angular2 будет выглядеть следующим образом

this.form.controls['power'].setValue('anthing here');

Ответ 3

В настоящее время это единственное, что вы можете сделать (как упоминалось в вопросе)

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

Существует открытая проблема, позволяющая reset форме https://github.com/angular/angular/issues/4933

Существует также запрос на pull, но это также позволяет вам "вручную" для каждого элемента управления, но также позволяет reset состояниям, таким как нетронутые, коснутые,... https://github.com/angular/angular/pull/6679

Ответ 4

Вы можете попытаться сохранить форму неизменной. Когда вам понадобится reset, вы просто перестройте его. Этот способ может быть уверен в этом. Вы также можете сохранить значения, хранящиеся где-то, и reset form для этих значений. Скажем, вы редактируете элемент, когда вы reset можете вернуться к исходным значениям, а не просто к пустой форме...

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 и просто определять метод controls и submit(), остальное наследуется...

Ответ 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');
        });
    }
}

Ответ 6

Код:

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