Object is possibly undefined formio onchange

Question

I've got this error:

Error: src/app/app.component.html:1:30 - error TS2532: Object is possibly 'undefined'.

1 <form-builder [form]="form" (change)="onChange($event)"></form-builder>

in my form-builder. I think is the (change) the problem. But honeslty, i don't know why and how to solve it

Answer 1

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-form-crear',
  templateUrl: './form-crear.component.html',
  styleUrls: ['./form-crear.component.scss']
})
export class FormCrearComponent implements OnInit {
  @ViewChild('json') jsonElement?: ElementRef | any;
  @ViewChild('formio') formio:any;
  public form: any = {
    components: [

    ]
  };


  ngOnInit(): void {
      
  }

  guardarFormulario(){
    this.jsonElement.nativeElement.innerHTML = '';
    this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(this.formio.form, null, 4)));

    const json = document.createTextNode(JSON.stringify(this.formio.form, null, 4));
  }

}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <form-builder [form]="form" #formio></form-builder>
        </div>
    </div>
    <hr class="linea">
    <button (click)="guardarFormulario()">Ver formulario</button>
    <div class="well jsonviewer">
        <pre id="json"><code class="language-json" #json></code></pre>
      </div>
</div>