Working on my Angular application,
I have implemented a form with a textarea element. My goal is to incorporate a clear button inside the textarea element that should:
- Appear only when the textarea is focused
- Disappear when the textarea is out of focus (clicked outside)
- Clear the text within the textarea upon clicking
Here's how I have set it up:
<form [formGroup]="form">
<p>This form is reactive<br />
<textarea (focusin)="componentMethod($event)" (focusout)="onfocusout($event)" formControlName="test" #test ></textarea>
<button *ngIf="showNotes" type="reset" id="close-resetNotes" class="close" aria-label="Close" (click)="resetNotes()">
<span aria-hidden="true">×</span>
</button>
</p>
</form>
In the TypeScript part:
export class AppComponent {
public form: FormGroup;
showNotes = false;
@ViewChild("test") textareaElement: ElementRef;
constructor(private formBuilder: FormBuilder) {}
public ngOnInit() {
this.form = this.formBuilder.group({
test: ["some text", Validators.nullValidator]
});
}
public componentMethod(event) {
this.showNotes = true;
}
public onfocusout(event) {
this.showNotes = false;
}
resetNotes() {
this.form.patchValue({ test: "" });
this.showNotes = true;
}
}
The issue encountered is that the textarea loses focus immediately upon clicking the clear button, before applying the clear action. Any suggestions on how to resolve this?