Angular - call setters/getters in html - html

Question

I have in the .ts file the following code:
set query(query: string) {
this.form.get('query').setValue(query);
}
get query() {
return this.form.controls.query;
}
I am trying to call the getter method in .html file as:
<div *ngIf="!query.valid && (query?.dirty || query?.touched)">
<div [hidden]="!query.errors.required">Query is required</div>
</div>
However, an error is thrown. The code works perfectly if I remove the setter from the .ts file.
Why does this happen?

Answer 1

You can do it via two ways,
Way 1:
set query(query: any) {
this.form.get('query').setValue(query);
}
get query() {
return this.form.controls.query;
}
Way 2:
set query(query: string) {
this.form.get('query').setValue(query);
}
get query(): AbstractControl {
return this.form.controls.query;
}
when you assign a value to query you are assigning it as a string see the incoming argument type in your setter. So by default angular understands it as string type. Then in your HTML, you try to access it as an object which creates a problem for angular as it expects it to be a string but used as an object.

Answer 2

try form.getControls['query'].setValue(myValue)
form.get('fieldName') will get value of that field ...
form.controls['fieldName'] would get the field itself .. Field control will expose get or set value methods

Answer 3

Although the accepted answer works and the thinking behind it make sense, I would completely avoid using any as a return type, when you know exactly what you're returning.
That just goes against the purpose of using Typescript as a language. Using any is the same as saying "accept everything and don't just interpret it as a string".
set query(query: string) {
this.form.get('query').setValue(query);
}
get query(): AbstractControl {
return this.form.controls.query;
}
Since you know you're returning an AbstractControl, I would set the return type to either AbstractControl or, if you want to be more specific, to FormControl.