Вручную установите значение для управления FormBuilder

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

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

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

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

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

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>
8 99
forms angularjs angular-components

8 ответов:

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

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

старый:

сейчас мы вынуждены делать приведение типа:

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

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

162

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

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

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

83

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

для обновления формы управления от контроллера сделать это:

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

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

нет необходимости сбрасывать ошибки

ссылки

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

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

11

вы можете попробовать это:

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 относительно второго параметра updateValue метод: https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model.ts#L269.

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

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

3

@Filoche угловой 2 обновленное решение. Используя FormControl

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

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

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

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

2

ни один из них не работал для меня. Я должен был сделать:

  this.myForm.get('myVal').setValue(val);
1

для обновления значения элемента управления реактивной формы можно использовать следующие методы. Любой из следующих методов подойдет для ваших нужд.

методы, использующие setValue ()

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

методы, использующие patchValue ()

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

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

вы можете использовать любой метод внутри события обработчик

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

при необходимости можно обновить несколько элементов управления в группе форм с помощью

this.form.patchValue({"dept": selected.id, "description":"description value"});
0