Angular : 如何为文本区域设置条件清除按钮

Question

在我的 Angular 应用程序中

我有一个包含文本区域的表单

我的目的是在 textarea 元素中添加一个清除按钮，即清除按钮 :

应该只在 texarea 聚焦时出现
当文本区域失焦时应该消失（点击外面）
单击时应清除文本区域内写入的文本

我已经做到了：

<form [formGroup]="form">
    <p>This is a reactive form<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>

在 ts 部分：

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;
  }
}

这个问题是，当点击清除按钮时，文本区域甚至在应用 onClick 清除按钮操作之前就已经聚焦了

建议??

Answer 1

您可以使用文本区域的 focus 和 blur 事件以及一个变量来相应地设置条件。我根据您的要求创建了一个示例代码，看看here

Angular : 如何为文本区域设置条件清除按钮

Angular : how to set a conditional clear button for a textarea

javascript

html

angular

typescript

angular-forms