Question

我的表单是通过 Enter 键提交的。 textarea 的值为null，因为焦点仍在 textarea 上。

有没有办法强制模糊 textarea ，还是有更优雅的方法？

Answer 1

要模糊DOM表单元素，请将本地模板变量与@ViewChild结合使用以获得＆＃34; Angular wrapped＆＃34;参考textarea。然后在使用nativeElement：

解包后使用渲染器进行模糊

@Component({
  selector: 'my-app',
  template: `
    <form>
      <textarea #textArea [(ngModel)]="text" (keyup.enter)="submit()"></textarea>
    </form>
  `
})
export class AppComponent {
  text = "";
  constructor(private renderer:Renderer) { console.clear(); }
  @ViewChild('textArea') textArea:ElementRef;
  submit() {
    this.renderer.invokeElementMethod(
      this.textArea.nativeElement, 'blur', []);
  }
}

Plunker

Answer 2

我假设您正在使用ngSubmit指令提交表单。在调用表单的提交方法之前，我希望您检查表单的有效性。确保在提交之前必须具有required属性。

<form #myForm="ngForm" (ngSubmit)="myForm.valid && submit()">

所以基本上在提交表单之前它会检查表单的有效性，如果是，则只会调用submit方法。

修改

您还可以在submit方法中检查角度组件的表单有效性。

<强> HTML

<form #myForm="ngForm" (ngSubmit)="&& submit()">

<强>组件

submit(){ if(this.myForm.valid){ console.log('MyForm is valid'); //do make ajax or call action to submit data to server } else { //here form is invalid console.log('MyForm is valid'); } }

Answer 3

在提交前，您可以在此处执行3项操作验证 -

1）在组件中创建一个函数，用于验证textarea并在提交函数中调用它。像这样 -

onSubmit(){
    isTextAreaValid = this.validateTextArea();
    if(isTextAreaValid){
         //submit the data
    }
}

2）或者创建一个名为＆＃39; isTextAreaValid＆＃39;检查，像这样 -

<form *ngIf="active" (ngSubmit)="onSubmit() && isTextAreaValid" #heroForm="ngForm">

3）或者就这样做 -

<form #heroForm="ngForm" (ngSubmit)="heroForm.form.valid && onSubmit()">

Angular2 - Textarea验证如何强制模糊

3 个答案: