Eu sei que a resposta já foi dada, mas quero dar uma resposta breve como atualizar o valor de um formulário para que outros recém-chegados possam ter uma idéia clara.
sua estrutura de formulário é tão perfeita para usá-lo como exemplo. portanto, em toda a minha resposta, denotarei isso como a forma.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
portanto, nosso formulário é um tipo de objeto FormGroup que possui três FormControl .
Há duas maneiras de atualizar o valor do modelo:
Use o método setValue () para definir um novo valor para um controle individual. O método setValue () segue estritamente a estrutura do grupo de formulários e substitui todo o valor do controle.
Use o método patchValue () para substituir quaisquer propriedades definidas no objeto que foram alteradas no modelo de formulário.
As verificações estritas do método setValue () ajudam a detectar erros de aninhamento em formulários complexos, enquanto o patchValue () falha silenciosamente nesses erros.
Da documentação oficial da Angular aqui
portanto, ao atualizar o valor para uma instância de grupo de formulários que contém vários controles, mas você pode querer atualizar apenas partes do modelo. patchValue () é o que você está procurando.
vamos ver o exemplo. Quando você usa patchValue ()
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
mas quando você usa setValue (), é necessário atualizar o modelo completo, pois ele segue estritamente a estrutura do grupo de formulários. então, se escrevermos
this.form.setValue({
dept: 1
});
// it will throw error.
Devemos passar todas as propriedades do modelo de grupo de formulários. como isso
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
mas não uso esse estilo com frequência. Prefiro usar a seguinte abordagem que ajuda a manter meu código mais limpo e compreensível.
O que faço é declarar todos os controles como uma variável separada e usar setValue () para atualizar esse controle específico.
para o formulário acima, farei algo assim.
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;
}
quando você precisar atualizar o controle de formulário, use essa propriedade para atualizá-lo. No exemplo, o questionador tentou atualizar o controle do formulário de departamento quando o usuário seleciona um item na lista suspensa.
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.
}
Sugiro que dê uma olhada na API do FormGroup para conhecer todas as propriedades e métodos do FormGroup.
Adicional : para conhecer o getter veja aqui