Form like "Formation edit" with AutoForm?

help
1

If posible to do a form edit like this http://formation.meteor.com/fields with
AutoForm
Thanks

2

Looks like all it’s doing is going from the R to the U in CRUD. I’m thinking switching the formType between update and readOnly on the button click would do something similar.

3

I tested and it works. It was really simple. I guest that hard part is remove from ‘readonly’ mode all form behaviour and style, say input fields style, selection, focus, …
thanks @mordrax for tip

4

@mordrax do you know some package or example that make AutoForm readonly not look and behave like a form??
I don´t know how hard is recreate a new AutoForm template for this.

5

No, neither do I. I was hoping that the readOnly mode took care of the styling but it looks like it falls short. There are a couple of others with your exact same issue, check out autoform’s github issues. Sorry, that’s all I got.


6

Ok, not problem. I had read these post before.
I have an idea, if it work, I’ll put it here.
Thanks.

7

I just testing more simple approach first.
Playing with inputs on form DOM …

<template name="editPersona">
  {{#autoForm id="editPersona" schema="simplePerfil" doc=doc type=formType template=bootstrap}}
    {{> afQuickFields omit=""}}
    <button type="button" id="cancel-btn" class="btn btn-white">Cancel</button>
    <button type="button" id="edit-btn" class="btn btn-primary">Edit</button>
  {{/autoForm}}
</template>

This change all input elements with any other tag

Template.editPersona.onRendered(function() {
  $("form#editPersona :input").each(function(){
    let input = $(this).replaceWith('<p>Replaced input</p>')
  })
})

The problem is that it do after template rendered. I need doit before. Maybe with Blaze.render to not attached parentNode ?? Any advice on this ??

8

I have a working sample for any one with same needed.
It just disable CSS border, background, shadow, … on form-control[readonly] for readonly input.

CSS

.form-control[readonly] {
    background: none ;
    border: none ;
    outline: none ;
    box-shadow: none ;
}

JS

const perfil = {
  name: {
    type: String
  },
  age: {
    type: Number
  }
}

simplePerfil = new SimpleSchema(perfil)

const doc = {
  name: 'Test',
  age: 18
}

Template.editPersona.onCreated(function() {
  this.formType = new ReactiveVar('readonly')
})

Template.editPersona.helpers({
  doc() { 
    return doc },
  formType() { 
    return Template.instance().formType.get()
  }
})

Template.editPersona.events({
  'click #edit-btn'(e,t) {
    t.formType.set('update')
  }
})

HTML

<head>
  <title>AutoForm</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  {{> editPersona}}
</template>

<template name="editPersona">
  {{#autoForm id="editPersona" schema="simplePerfil" doc=doc type=formType template=bootstrap}}
    {{> afQuickFields omit=""}}
    <div class="multiFormButtons">
      <button type="button" id="cancel-btn" class="btn btn-white">Cancel</button>
      <button type="button" id="edit-btn" class="btn btn-primary">Edit</button>
    </div>
  {{/autoForm}}
</template>

That´s all

9

Improved a little.
With select set to readonly still you can select between values. Then I set to disabled and add needed CSS for remove select arrows and enable cursor for text selection.

Changed JS

const perfil = {
  name: {
    type: String
  },
  age: {
    type: Number,
    allowedValues: [1,3,2]
  }
}

simplePerfil = new SimpleSchema(perfil)

const doc = {
  name: 'Test',
  age: 2
}

Template.editPersona.onCreated(function() {
  this.formType = new ReactiveVar('disabled')
})

Template.editPersona.helpers({
  doc() { 
    return doc },
  formType() { 
    return Template.instance().formType.get()
  }
})

Template.editPersona.events({
  'click #edit-btn'(e,t) {
    t.formType.set('update')
  }
})

new CSS

/* https://gist.github.com/joaocunha/6273016 */
.form-control[disabled] {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

NOTE: Internet Explorer need CSS for remove arrows. Not tested yet.

11

Update code on MeteorPad.
Correct incorrect behaviour btw Firefox and Chrome.

http://meteorpad.com/pad/uzCXLFqpSYjvSJkEa/Copy%20of%20AutoForm%20simple%20Edit