The problem is the displayWith property on the mat-autocomplete component is preventing the control value from being set programmatically with a plain string.
The displayFn callback function provided is preventing the form control from being set with a plain string. You could either remove the displayWith property, or update the displayFn to allow a plain string to be set, or set the control value using an object {value: 'my string'} instead of a string.
1. Remove the displayWith property from the autocomplete component.
//template
<mat-autocomplete
#auto="matAutocomplete"
[displayWith]="displayFn" <-- remove
>
2. Update the displayFn method to allow your manual changes.
// component.ts
displayFn(template): string {
return template && template.value ? template.value : template;
}
3. Update the control.setValue() method to work with the displayFn.
Set the control value by pass in an object with i.e., control.setValue({value: 'my string'}).
// component.ts
initForm() {
this.sendMessageForm = this.fb.group({
test: [{value: 'Initial text'}], <-- need to use object {value: 'string'}
});
}
...
addText() {
this.sendMessageForm?.get('test').setValue({value: 'hi'});
}
