Angular2 - Textarea 验证如何强制模糊答案

【问题标题】：Angular2 - Textarea validation how to force blurAngular2 - Textarea 验证如何强制模糊
【发布时间】：2016-05-13 01:14:59
【问题描述】：

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

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

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

要模糊 DOM 表单元素，请结合使用本地模板变量和 @ViewChild 来获取对 textarea 的“Angular Wrapped”引用。然后用nativeElement解包后使用Renderer进行模糊处理：

@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

【讨论】：

【解决方案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');
   }
}

【讨论】：

感谢您的回答。有没有办法以编程方式做到这一点？
@LukaŠilje 你所说的“程序化方式”是什么意思？
程序化是指在打字稿内部，在 html 外部。似乎 myForm.valid 只是内部代码的布尔值。
@LukaŠilje 查看更新的代码。会帮助你。谢谢
谢谢！这让我意识到问题出在其他地方。文本框不会触发(change) 事件，所以我通过提交this.form.value[this.columnName] 来解决问题

【解决方案3】：

您可以在此处做 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()">

【讨论】：