Angular : 如何为文本区域设置条件清除按钮
Angular : how to set a conditional clear button for a textarea
在我的 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 清除按钮操作之前就已经聚焦了
建议??
您可以使用文本区域的 focus
和 blur
事件以及一个变量来相应地设置条件。
我根据您的要求创建了一个示例代码,看看here
在我的 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 清除按钮操作之前就已经聚焦了
建议??
您可以使用文本区域的 focus
和 blur
事件以及一个变量来相应地设置条件。
我根据您的要求创建了一个示例代码,看看here