Я знаю, что ответ уже дан, но я хочу дать немного краткий ответ, как обновить значение формы, чтобы другие новички могли получить четкое представление.
Ваша структура формы настолько идеальна, чтобы использовать ее в качестве примера. Итак, на протяжении всего моего ответа я буду обозначать его как форму.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
поэтому наша форма представляет собой объект типа FormGroup, который имеет три FormControl .
Есть два способа обновить значение модели:
Используйте метод setValue (), чтобы установить новое значение для отдельного элемента управления. Метод setValue () строго придерживается структуры группы форм и заменяет все значение для элемента управления.
Используйте метод patchValue () для замены любых свойств, определенных в объекте, которые изменились в модели формы.
Строгие проверки метода setValue () помогают отследить ошибки вложения в сложных формах, в то время как patchValue () автоматически завершает работу с этими ошибками.
Из угловой официальной документации тут
Таким образом, при обновлении значения для экземпляра группы форм, который содержит несколько элементов управления, но вы можете захотеть обновить только части модели. patchValue () - это то, что вы ищете.
давайте посмотрим пример. Когда вы используете patchValue ()
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
но когда вы используете setValue (), вам необходимо обновить полную модель, так как она строго придерживается структуры группы форм. так что если мы напишем
this.form.setValue({
dept: 1
});
// it will throw error.
Мы должны передать все свойства модели группы форм. как это
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
но я не часто использую этот стиль. Я предпочитаю использовать следующий подход, который помогает сделать мой код чище и понятнее.
Что я делаю, я объявляю все элементы управления как отдельную переменную и использую setValue () для обновления этого конкретного элемента управления.
для вышеупомянутой формы я сделаю что-то вроде этого.
get companyIdentifier(): FormControl {
return this.form.get('name') as FormControl;
}
get dept(): FormControl {
return this.form.get('dept') as FormControl;
}
get description(): FormControl {
return this.form.get('description') as FormControl;
}
когда вам нужно обновить элемент управления формы, просто используйте это свойство для его обновления. В этом примере спрашивающий пытался обновить элемент управления формы dept, когда пользователь выбирал элемент из выпадающего списка.
deptSelected(selected: { id: string; text: string }) {
console.log(selected) // Shows proper selection!
// instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.
this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}
Я предлагаю взглянуть на API FormGroup, чтобы узнать как работают все свойства и методы FormGroup.
Дополнительно : узнать о геттере смотрите здесь