Unable to get a json schema used for validation

[parky128]

@GeoAstronaute

I cannot figure out how to get a custom json schema to be loaded in and used for validation purposes.

I have been following guides here https://levelup.gitconnected.com/autocomplete-json-with-angular-and-monaco-f1dcc01e36e1 and your readme of course.

Ctrl+Space just gives me the following $schema option and none of my schema defined properties.

I have clearly got something misconfigured and misunderstood how to set up the schema loading correctly.

Stackblitz of my setup - https://stackblitz.com/edit/materia-ngx-monaco-editor-example-y2tcrz?file=src/app/app.component.ts

Can you kindly point out what the problem is here, what am I doing incorrectly please?

[jmarc-roy]

Hi @parky128!

Today it's a bit tricky with the current editor. I'm currently working on a new version that will drop support for angular v8, but will allow to do it easily with a new "uri" input (v5). Here is an updated example with the current beta version: stackblitz.

If you want to achieve the same behavior with v4.x you will have to set a model uri on your editor by you own (by retrieving editor instance).

[parky128]

Awesome, thanks for the response and guidance!

[ohabash]

This works for me but once i enable the following; all <ngx-monaco-editor>... on the page will have the same code. do you know how i could get schema validation and multiple editors?

  editorInit(editor: MonacoStandaloneCodeEditor) {
    if (this.autoFormat) this.code = JSON.stringify(JSON.parse(this.code), null, "\t");
    this.editor = editor;
    this.monaco = window["monaco"];
    this.setModel(); // this causes all editors to have same code
  }

  setModel() {
    this.modelUri = this.monaco.Uri.parse("a://b/foo.json");
    this.queryableSchema = new QueryableSchema(this.modelUri);
    this.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [this.queryableSchema.schema],
    });
  }

im on NG11... Thanks in advanced!

[ohabash]

Here is the full component... This component is used in multiple places but different this.code per

import { QueryableSchema } from "./queryable-schema";
import { Component, Input, OnInit } from "@angular/core";
import { MonacoEditorConstructionOptions, MonacoEditorLoaderService, MonacoEditorUri, MonacoStandaloneCodeEditor, } from "@materia-ui/ngx-monaco-editor";
import { filter, take } from "rxjs/operators";

@Component({
  selector: "app-json-editor",
  templateUrl: "./json-editor.component.html",
  styleUrls: ["./json-editor.component.scss"],
})
export class JsonEditorComponent implements OnInit {
  @Input() code: string;
  @Input() autoFormat: boolean = true;

  editorOptions: MonacoEditorConstructionOptions = {
    theme: "vs-dark",
    language: "json",
    automaticLayout: false,
    lineNumbers: "on",
    formatOnType: true,
    minimap: {
      enabled: false,
    },
  };
  editor: MonacoStandaloneCodeEditor;
  queryableSchema: QueryableSchema;
  monaco: typeof monaco;
  modelUri: monaco.Uri;

  constructor(private monacoLoaderService: MonacoEditorLoaderService) {
  }

  ngOnInit(): void {
    this.monacoLoaderService.isMonacoLoaded$
      .pipe( filter((isLoaded) => isLoaded), take(1) )
      .subscribe(() => this.setModel()); // this causes all editors to have same code
  }

  editorInit(editor: MonacoStandaloneCodeEditor) {
    if (this.autoFormat) this.code = JSON.stringify(JSON.parse(this.code), null, "\t");
    this.editor = editor;
    this.monaco = window["monaco"];
    // this.setModel(); // this causes all editors to have same code
  }

  setModel() {
    this.modelUri = monaco.Uri.parse("a://b/foo.json");
    this.queryableSchema = new QueryableSchema(this.modelUri);
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [this.queryableSchema.schema],
    });
  }

}