Angular 2 make form invalid

Question

I have the following example code:

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
  }
}

So basicly i check if the input on the textfield is a valid json expression. If i catch an error i would like to make the form invalid.

Is there a way to do this?

Answer 1

Yes you can acheive it but it is so much effort in Template driven as what you are using here.

just a gist of how you can achieve it.

Get a template reference of the form using viewchild.Get the form Control of the input from the ngForm and then set the setErrors . LINK.

Some thing like this but it is just for the input you can do it for the whole form.

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