javascript - Angular 2使表单无效

Question

我有以下示例代码:

component.html

<form onsubmit="" #VoucherForm="ngForm">
  <input type="text" name="field1" [(ngModel)]="rule['condition']"
  (ngModelChange)="validateJMES($event)">     
<form>

component.ts

validateJMES(value){
  try {
     this.jmespath.search({ }, value);
  } catch (e) {
     // Code that makes Form invalid
  }
}

所以基本上我检查文本字段上的输入是否是有效的 json 表达式。如果我发现错误，我想让表单无效。

有办法吗？

Answer 1

是的，你可以实现它，但它在模板驱动中需要付出很多努力，就像你在这里使用的一样。

只是关于如何实现它的要点。

使用 viewchild 获取表单的模板引用。从 ngForm 获取输入的表单控件，然后设置 setErrors 。 LINK .

像这样的事情，但它只是为了输入，你可以为整个表单做这件事。

<input #model="ngModel" [ngModel]="value">
<button (click)="model.control.setErrors({})">Invalidate</button>