представления формы с несколькими полями

Question

я хочу, если пользователь нажимает на кнопку «Добавить еще» кнопку Имя компонента и Сумма поля ввода продолжает добавлять на page.And, когда пользователь отправить форму после заполнения всех других полей, всех входных в том числе Название ингредиента и Кол-во Поле вставляется в коллекцию рецептов. Так что позже я могу показать полный рецепт с его ингредиентов с количеством на show_recipe page.I не уверен, если я должен добавить Имя компонента и Сумма значения поля в какой-либо другой коллекции, чтобы показать их на show_recipe page.How когда-либо я не получаю, как добавить все ингредиенты и их количество, а затем показать их на странице show_recipe. Можете ли вы посоветовать мне, как это сделать. полный исходный код here

add_recipes.html

<template name="add_recipes"> 
     <form class="add_recipe"> 
      <div class="form-group"> 
       <label class="control-label" for="name" >Recipe Name</label> 
       <input type="text" class="form-control" name="name" id="name" placeholder="Please Enter the Recipe name"> 
      </div> 
      <div class="form-inline mb"> 
       <div class="form-group"> 

        <label for="ingredient">Ingredient Name</label> 
        <input type="text" class="form-control" name="ingredient" id="ingredient" placeholder="Name"> 
       </div> 
       <div class="form-group"> 
        <label for="amount">Amount</label> 
        <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount "> 
       </div> 
       <button class="btn btn-default addMore">Add More</button> 
      </div> 
      <div class="form-group"> 
       <label class="control-label" for="des" >How to prepare</label> 

       <textarea class="form-control" type="text" name="description" rows="3" id="des"> 
       </textarea> 

      </div> 
      <div class="form-group"> 
       <label class="control-label" for="time" >Time to prepare</label> 

       <input class="form-control" type="number" name="time" id="time" placeholder="Time required to make the recipe. (In Minutes)"> 

      </div> 
      <div class="form-group"> 
       <label for="prodImg">Please Select the Image of your Recipe</label> 
       <input type="file" id="recipeImage" name="recipeImage"> 
      </div> 

      <div> 
       <button type="submit" name="submit" class="btn btn-success "> Add Recipe</button> 
       <a href="/" class="btn btn-default">Close</a> 
      </div> 
     </form> 
    </template> 

add_recipes.js

Template.add_recipes.events({ 
    'submit .add_recipe':function(event){ 
     var name = event.target.name.value ; 
     var ingredient = event.target.ingredient.value ; 
     var amount = event.target.amount.value ; 
     var description = event.target.description.value ; 
     var time= event.target.time.value ; 
     var file = $('#recipeImage').get(0).files[0]; 
     if(file){ 
      fsFile = new FS.File(file); 
      RecipesImages.insert(fsFile,function(err,result){ 
       if(!err){ 
        var recipeImage = '/cfs/files/RecipesImages/'+ result._id; 
        Recipes.insert({ 
         name:name, 
         description:description, 
         image:recipeImage, 
         time:time, 
         createdAt: new Date() 
        }) 
       } 
      }); 

     } else{ 

      var recipieImage = '/img/noimage.png'; 

      Recipes.insert({ 
       name:name, 
       description:description, 
       image:recipesImages, 
       time:time, 
       createdAt: new Date() 
      }) 
     } 
     // Clear the form 
     event.target.name.value = ""; 
     event.target.ingredient.value = ""; 
     event.target.amount.value = ""; 

     event.target.description.value = ""; 
     event.target.time.value= ""; 
     FlashMessages.sendSuccess('Recipe Added',{ autoHide: true, hideDelay: 3000 }); 
     Router.go('/'); 
     event.preventDefault(); 
    } 
}) 

Answer 1

Я хотел бы предложить вам использовать простую схему и AUTOFORM для достижения этой цели

Создать простую схему

ReceipeSchema = new SimpleSchema({ 
     // All the Other Properties as per your Requirement for "Add More" Feature use the below 
     ingredients: { 
     type: [Object], 
     minCount: 1 
     }, 
, 
    "ingredients.$.Name": { 
     type: String 
    }, 
    "ingredients.$.amount": { 
     type: String 
    } 
    }); 

Прикрепите SimpleSchema к коллекции, как этот

Receipe.attachSchema(ReceipeSchema);

Затем внутри Html добавить

<template name="insertReceipeForm"> 
    {{> quickForm collection="Receipe" id="insertReceipeForm" type="insert"}} 
</template> 

Viola !! вы автоматически сможете увидеть кнопку «плюс», чтобы включить столько ингредиентов, сколько захотите, и она будет храниться в виде массива.

Для получения более подробной информации о SimpleSchema https://github.com/aldeed/meteor-simple-schema

Collection2 https://github.com/aldeed/meteor-collection2

AUTOFORM https://github.com/aldeed/meteor-autoform

Днем Coding !!