Angular2 - Вручную установить значение для элемента управления FormBuilder

Это сводит меня с ума, я под пистолетом и не могу позволить себе провести еще целый день на этом.

Я пытаюсь вручную установить контрольное значение ('dept') внутри компонента, а его просто не работает - даже новое значение регистрируется для правильной консоли.

Вот экземпляр FormBuilder:

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

Это обработчик событий, который получает выбранный отдел:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

Теперь, когда форма отправлена, и я выхожу из системы this.form, поле остается пустым! Я видел другое использование ppl updateValue(), но это бета-версия .1, и я не вижу в качестве допустимого метода вызова элемента управления.

Я также попытался вызвать updateValueAndValidity() без успеха: (.

Я просто использовал бы ngControl="dept" в элементе формы, как я делаю с остальной частью формы, но с ее настраиваемой директивой/компонентом.

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>

Ответы

Ответ 1

Обновлено: 19/03/2017

this.form.controls['dept'].setValue(selected.id);

OLD:

В настоящее время мы вынуждены делать листинг типов:

(<Control>this.form.controls['dept']).updateValue(selected.id)

Не очень элегантный, я согласен. Надеюсь, что это улучшится в будущих версиях.

Ответ 2

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

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

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

Ответ 3

angular 2 final обновил там API. они добавили много методов для этого.

для обновления формы controll от контроллера выполните это

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

не нужно reset ошибок

ссылка

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Ответ 4

Вы можете попробовать следующее:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].updateValue(selected.id);
}

Для получения дополнительной информации вы можете посмотреть соответствующий JS Doc относительно второго параметра метода updateValue: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts#L269.

Надеюсь, он тебя обманет, Thierry

Ответ 5

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

Если вы не хотите вручную устанавливать каждое поле.

Ответ 6

@Filoche Angular 2 обновленное решение. Использование FormControl

(<Control>this.form.controls['dept']).updateValue(selected.id)удаp > 

import { FormControl } from '@angular/forms';

(<FormControl>this.form.controls['dept']).setValue(selected.id));

В качестве альтернативы вы можете использовать @AngularUniversity решение, которое использует patchValue