Angular2 - 文本区域验证如何强制模糊

Question

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

有没有办法在 textarea 上强制模糊，或者有更优雅的方法吗？

Answer 1

我假设您正在使用 ngSubmit 指令提交表单。我希望您在调用表单的提交方法之前检查表单的有效性。确保在提交前必填字段上应该有 required 属性。

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

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

编辑

您也可以在 submit 方法中从 angular 组件检查表单有效性。

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 2

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

1) 在您的组件中创建一个函数来验证您的文本区域并在您的提交函数中调用它。像这样--

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

2) 或者创建一个名为'isTextAreaValid'的属性来检查，像这样--

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

3) 或者像这样--

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

Answer 3

要模糊 DOM 表单元素，请结合使用局部模板变量和 @ViewChild 来获取对文本区域的 "Angular wrapped" 引用。然后用Renderer模糊，用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

Angular2 - 文本区域验证如何强制模糊

Angular2 - Textarea validation how to force blur

angular2-forms

angular