meteor-autoform

meteor-autoform copied to clipboard

Problem - Autoform field defined with input type as 'select-radio' or 'select-radio-inline' works well while inserting but does not populate the value of the field in 'update' mode. If the field type is changed to 'select' in update mode the old value is populated.

answerType: { type: String, label: 'Answer Type' , optional: true,
        autoform: {
            type: "select-radio-inline",
            options: function () {
            return [
                { label: "Yes/No", value: '1' },
                { label: "Select Options(Single)", value: '2' },
                { label: "Open Ended", value: '3' },
                { label: "Select Options(Multiple)", value: '4' }, 
            ]
            },
        },

    },

Meteor version 2.0 AutoForm 7.0.0

Hi @pkumar-uk sorry for the delay I missed this issue. Could you please to ensure proper reproduction add the two autoForm/quickForm defnitions for your insert and update use cases? Thank you, I will then start investigating.

The following one is another example where it does not work. Please let me know if more information is required. Thanks

 --- Schema 
let SchemaToDo = new SimpleSchema({
    schoolId: { type: String, optional: false },
    createdDt: {type: Date, optional: false},
    creationId: {type: String, optional: false},
    creationUId: {type: String, optional: false},
    creationBy: {type: String, optional: false},
    modiDt: {type: Date, optional: true},
    modiId: {type: String, optional: true},
    modiUId: {type: String, optional: true},
    modiBy: {type: String, optional: true},
    priority: {type: String, optional: false},
    status: {type: String, optional: false},
    shortDesc: {type: String, optional: false},
    longDesc: {type:String,label: "Content",optional: true,
        autoform:{
            afFieldInput:{
               type: 'summernote',
               class: 'editor',
               settings:{height: 200,
               minHeight:200,
               maxHeight:null,
               imageCollection:'Images',
            }
    }}},
    attachURLMulti: {type: Array,
        label:'Please select supporting docs', 
        optional: true,
        autoform: {
          type: 'slingshot', // (required)
          multi: true,
          ui: {
            noPreview: true,
            hideDownload: true,
            showDownloadAll: false
          },
          slingshot: {
            directives: [{
              name: 'otherLoad'
  
            }]
          }
        }
    }, 
    "attachURLMulti.$":{type:afSlingshot.fileSchema},
    statusDesc: {type:String,label: "Status",optional: true,
        autoform:{
            afFieldInput:{
               type: 'summernote',
               class: 'editor',
               settings:{height: 200,
               minHeight:200,
               maxHeight:null,
               imageCollection:'Images',
            }
    }}},
    statusURLMulti: {type: Array,
        label:'Please select supporting docs',
        optional: true,
        autoform: {
          type: 'slingshot', // (required)
          multi: true,
          ui: {
            noPreview: true,
            hideDownload: true,
            showDownloadAll: false
          },
          slingshot: {
            directives: [{
              name: 'otherLoad'
  
            }]
          }
        }
    }, 
    "statusURLMulti.$":{type:afSlingshot.fileSchema},
    primaryId: {type: String, optional: false},
    primaryName: {type: String, optional: false},
    teamIds: {type: Array, optional: true},
    "teamIds.$": {type: String, optional: true},
    teamNames: {type: Array, optional: true},
    "teamNames.$":{type: String, optional: true},
    infoIds: {type: Array, optional: true},
    "infoIds.$": {type: String, optional: true},
    infoNames: {type: Array, optional: true},
    "infoNames.$":{type: String, optional: true}, 
    todoBy: {type: Date, optional: false},
});

---- Insert
    {{#autoForm collection="ToDo" schema=schema id="instodoMain" template="bootstrap3-horizontal" type="insert" validation="submit"}}
        {{> afQuickField name='shortDesc' label="Title"}} 
        {{> afQuickField name='longDesc' placeholder='To do Description..'}} 
        {{> afQuickField name='attachURLMulti' label="Any attachement?"}}
        {{> afQuickField name='priority' type="select-radio-inline" label="Priority" options=optPriority}}
        {{> afQuickField name='todoBy' type="datetimepicker" label="To be done by Date/Time"}}
        {{> afQuickField name='primaryId' type="select2"    options=optStaffList label="Primary Responsible"}} 
        {{> afQuickField name='teamIds' type="select2"  multiple=true options=optStaffList label="Team Members"}} 
        {{> afQuickField name='infoIds' type="select2"  multiple=true options=optStaffList label="Inform Members"}}    
        <div class="form-group">
            <button type="submit" class="btns3 btn btn-sm btn-primary">Insert</button>
            <button type="reset" class="btn btn-sm btn-default">Reset</button>
        </div>
    {{/autoForm}}

--- Update
    {{#autoForm collection="ToDo" schema=schema id="updtodoMain" doc=doc template="bootstrap3-horizontal" type="update" validation="submit"}}
        {{> afQuickField name='shortDesc' label="Title"}} 
        {{> afQuickField name='longDesc' placeholder='To do Description..'}} 
        {{> afQuickField name='attachURLMulti' label="Any attachement?"}}
        {{> afQuickField name='priority' type="select-radio-inline" label="Priority" options=optPriority}}
        {{> afQuickField name='todoBy' type="datetimepicker" label="To be done by Date/Time"}}
        {{> afQuickField name='primaryId' type="select2"    options=optStaffList label="Primary Responsible"}} 
        {{> afQuickField name='teamIds' type="select2"  multiple=true options=optStaffList label="Team Members"}} 
        {{> afQuickField name='infoIds' type="select2"  multiple=true options=optStaffList label="Inform Members"}}    
        <div class="form-group">
            <button type="submit" class="btns3 btn btn-sm btn-primary">Insert</button>
            <button type="reset" class="btn btn-sm btn-default">Reset</button>
        </div>
    {{/autoForm}}

-- helper
optPriority: ()=> {
        return [
            {label:'High', value:'High'},
            {label:'Medium', value:'Medium'},
            {label:'Low', value:'Low'},
        ]
    }

I tried to reproduce with a fresh new repo but for me the update form actually updated the document.

Can you take the time and create a minimal GitHub repo, containing only the insertform and update form to allow me to reproduce this issue? Please also do not include any other fields, than the ones involved in the issue (the select radio fields) to avoid any side-effect.

I think the issue is not that. The update does work. It is just that in update mode the radio field does not get populated with old value, when Autoform is opened in update mode. If you are not seeing in your code, I will create a min GitHub repo.

Please find mini repo https://github.com/pkumar-uk/testapp.git

Not very neat but will help you see the issue.

Insert some records and try updating. The radio type input is not initialised.

Please let me know if more information is needed.

Hey @pkumar-uk the problem lies within the theme and the bootstrap custom radio-button component and not AutoForm itself. Let me check, if there is a potential solution to this

Created a fix here: https://github.com/Meteor-Community-Packages/meteor-autoform-themes/pull/5

Please checkout and review, if possible so it can be merged and published soon

Apologies for not looking at this issue as I had an workaround. I want to confirm that I have tested the changes and they seem to be working

It should be fixed in version 1.0.6