Json
The JSON rule confirms that a field's value is valid, parseable JSON — a string that can be run through JSON.parse() without throwing. It's the check to reach for on fields like a raw API payload textarea, a custom metadata or settings blob, or a webhook configuration field where the user is expected to paste structured data directly, so a malformed brace or a trailing comma gets caught before that string is saved or forwarded somewhere that expects real JSON. This rule only confirms the value parses; it doesn't check the shape of the parsed result against any particular schema, so pairing it with your own structural check is still worthwhile when the JSON needs specific keys or types.
#Directive Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input json type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Chain Rule Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input rule="json" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Reactive Form Code Snippet
//component.ts
export class ReactiveComponent{
public form !: FormGroup;
constructor(
private fb : FormBuilder,
private rv : ReactiveValidator,
){this.generteForm()}
generteForm(){
this.form = this.fb.group({
<name> : ['',this.rv.map('json',<CUSTOM_MESSAGE>)]
})
}
}
//component.html
<!DOCTYPE html>
<html lang="en">
...
<form [formGroup]="form">
<input type="text" name="<name>" formControlName="<name>">
<ng-absolute-validator [formInstance]="form.get(<name>)"></ng-absolute-validator>
</form>
...
</html>