Cómo obtener datos de formularios en grapesjs

Hola a todos, Estoy usando el bloque Forms en grapejs y uso grapesjs con angular 6. Pero no entiendo que ¿cómo puedo obtener datos de los formularios al hacer clic en enviar botón del formulario? Estoy usando el siguiente código para los formularios

Sea bm = editor. Jefe de bloque;
bm.add('form', {
      Etiqueta: '
      <svg class="gjs-block-svg gjs-block-svg-form" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <clase de camino="gjs-bloque-svg-camino" d="M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" regla de relleno="no cero"></path>
        <path class="gjs-block-svg-path" d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" regla de relleno="no cero"></path>
        <rect class="gjs-block-svg-path" x="2" y="15" ancho="10" altura="3" rx="0.5"></rect>
      </svg>
      <div class="gjs-block-label">Form</div>',
      categoría: 'Formas',
      Contenido: '
        <form-class="form" style="background: LightGray;height:220px;padding-top:20px">
          <div class="form-group">
            <label class="label">Name</label>
            <input id="username" value="himanshu"placeholder="Escribe aquí tu nombre" clase="input"/>
          </div>
          <div class="form-group"style="margin-top:10px">
            <etiqueta clase="etiqueta">Correo electrónico</label>
            <input type="email" placeholder="Escribe aquí tu email" clase="input"/>
          </div>
          <div class="form-group">
            <etiqueta clase="etiqueta">Género</label>
            <input type="checkbox" class="checkbox" value="M" name="opt">
            <etiqueta clase="casilla-etiqueta" >M</label>
            <input type="checkbox" class="checkbox" value="F" name="opt">
            <label class="casilla de verificación">F</label>
          </div>
          <div class="form-group">
            <label class="label">Message</label>
            <textarea clase="textárea"></textarea>
          </div>
          <div class="form-group" style="margin-top:10px">
            <botón id="buttonsubmit" type="submit" class="button" style="background :MediumSeaGreen;width:200px">Enviar</button>
          </div>
        </form>
      `,
    });
    bm.add('input', {
      Etiqueta: '
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" versión="1.1" ancho="32px" viewBox="0 0 16 16">
<path fill="#FFFFFF" d="M16 5c0-0.6-0.4-1-1-1h-14c-0.6 0-1 0.4-1 1v6c0 0.6 0.4 1 1h14c0.6 0 1-0.4 1-1v-6zM15 11h-14v-6h14v6z"/>
<path fill="#FFFFFF" d="M2 6h1v4h-1v-4z"/>
</svg>
      <div class="gjs-block-label">Input</div>',
      categoría: 'Formas',
      contenido: '<input class="input"/>',
    });
    bm.add('textarea', {
      Etiqueta: '
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <clase de camino="gjs-bloque-svg-camino" d="M22,7.5 C22,6.6 21.5,6 20.75,6 L3.25,6 C2.5,6 2,6.6 2,7.5 L2,16.5 C2,17.4 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.4 22,16.5 L22,7.5 Z M21,17 L3,7 L21,7 L21,7 L21,17 Z"></path>
        <polygon class="gjs-block-svg-path" puntos="4 8 5 8 5 5 12 4 12"></polygon>
        <polygon class="gjs-block-svg-path" puntos="19 7 20 7 20 17 19 17"></polygon>
        <polygon class="gjs-block-svg-path" puntos="20 8 21 8 21 9 20 9"></polygon>
        <polygon class="gjs-block-svg-path" puntos="20 15 21 15 21 16 20 16"></polygon>
      </svg>
      <div class="gjs-block-label">NombreTextoÁrea</div>',
      categoría: 'Formas',
      Contenido: '<ClaseAreaTexto="Área de Texto"></textarea>',
    });

bm.add('select', {
      Etiqueta: '
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" regla de relleno="no cero"></path>
        <polygon class="gjs-block-svg-path" transforme="translate(18.500000, 12.000000) scale(1, -1) translate(-18.500000, -12.000000) " puntos="18.5 11 20 13 17 13"></polygon>
        <rect class="gjs-block-svg-path" x="4" y="11.5" ancho="11" altura="1"></rect>
      </svg>
      <div class="gjs-block-label">1</div>',
      categoría: 'Formas',
      contenido: '<select class="select">
      <valor de opción="1">1</option>
        <valor de opción="2"> 2</option>
        ',</select>
    });

bm.add('button', {
      Etiqueta: '
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" regla de relleno="no cero"></path>
        <rect class="gjs-block-svg-path" x="4" y="11.5" ancho="16" altura="1"></rect>
      </svg>
      <div class="gjs-block-label">Button</div>',
      categoría: 'Formas',
      contenido: '<button class="button">Enviar</button>',
    });

bm.add('label', {
      Etiqueta: '
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,11.875 C22,11.35 21.5,11 20.75,11 L3.25,11 C2.5,11 2,11.35 2,11.875 L2,17.125 C2,17.65 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.65 22,17.125 L22,11.875 Z M21,17 L3,17 L3,12 L21,12 L21,12 L21,17 Z" regla de relleno="no cero"></path>
        <rect class="gjs-block-svg-path" x="2" y="5" ancho="14" altura="5" rx="0,5"></rect>
        <polygon class="gjs-block-svg-path" fill-rule="nonzero" puntos="4 13 5 13 5 16 4 4 16"></polygon>
      </svg>
      <div class="gjs-block-label">Label</div>',
      categoría: 'Formas',
      contenido: '<etiqueta clase="etiqueta">Etiqueta</label>',
    });

bm.add('checkbox', {
      etiqueta: 'Casilla de verificación',
      Atributos: { Clase: 'FA FA-Check-Square' },
      categoría: 'Formas',
      contenido: '<tipo de entrada="casilla de verificación" clase="casilla de verificación"/>',
    });

bm.add('radio', {
      etiqueta: 'Radio',
      atributos: { clase: 'fa fa-punto-círculo-o' },
      categoría: 'Formas',
      Contenido: '<tipo de entrada="radio" clase="radio"/>',
    });

Bloque básico
    bm.add('link', {
      etiqueta: '<b>Enlace</b>',
      Atributos: { Clase: 'FA FA-Link' },
      categoría: 'Básico',
      Contenido: {
        Contenido: '
        <div class="container"style= "">
          Inserte el enlace aquí         
        ',</div>
        estilo: {
          color: 'morado',
          Borde: '1px punteado sólido'
        }
      }
    });

! 111111111

Como se muestra en la instantánea anterior, he rellenado el formulario y ahora, cuando hago clic en enviar formularios, los datos deberían estar en el que he rellenado. Por favor, decidme si hay algún enlace o documentación donde pueda obtener ayuda