Javascript 动态加载a<；表格：输入>；从按钮单击事件-Spring MVC

我试图在单击按钮时添加一个输入字段，我得到如下异常：

。IllegalStateException:bean名称“name”的BindingResult和普通目标对象都不能作为请求属性使用

我假设它这样做是因为它不能保证在提交时有一个对象绑定结果？这有什么办法吗？或者，我不可能动态加载字段吗

这是我的HTML，我现在只是在玩这个概念，所以它是最基本的

<input type="button" id="more_ingredients" onclick="add_ingredients();" value="add more">
<form:form commandName="newIngredients" id="form">
   <div id="wrapper">
      <form:input path="name"/>
      <form:input path="amount"/>
      <form:input path="unit"/>
      <br>
      <form:input path="name"/>
      <form:input path="amount"/>
      <form:input path="unit"/>
      <br>
   </div>   
   <form:button type="submit">Submit</form:button>
</form:form>

提交

这是我的JS

function add_ingredients() {
   document.getElementById('form').innerHTML += '<form:input path="name /> <form:input path="amount"/> <form:input path="unit"/>';
   //The exception is being triggered by the above line, if I remove the 'form:' tag, the error will disappear.  
}

函数添加配料（）{
document.getElementById（'form'）.innerHTML+='我已经使用.clone（）方法解决了这个问题，使用了我发现的一个片段，通过简单地更改被克隆的html，我对它进行了轻微的修改，以支持spring表单标记

HTML:

<form:form commandName="newIngredients">
    <div id="dynamic_ingredients">
        <a id="add-ingredient" href="#">Add Another Ingredient +</a>
        <div class="ingredient_field">
            <form:input path="name"/>
            <form:input path="amount"/>
            <form:input path="unit"/>
        </div>
    </div>
</form:form>



jQuery:

$(document).ready(function(){
    //the click function does not seem to be working in the example, so I have replaced it with this.
    $(document).on('click', '.icon-delete', function(){
        $(this).parent().remove();
    });
    //Keep a single clone of the original
    var clonedField = $('.ingredient_field').clone(), 
    main = $('#dynamic_ingredients');

    // Add in the delete <a>
    $('<a>', {
        text: 'Remove Step', 
        class: 'icon-delete', 
        href: '#'
    }).appendTo(clonedField);

    // Clone the cloned original and append it back to the list
    $('#add-ingredient').click(function() {
        main.append(clonedField.clone());
        return false;
    });
});

$（文档）.ready（函数（）{
//在本例中，click函数似乎不起作用，因此我将其替换为这个函数。
$（文档）。在（'单击'，'上。图标删除'，函数（）{
$（this.parent（）.remove（）；
});
//保留原始版本的单个克隆
var clonedField=$（'.component_field'）.clone（），
main=$（“#动态成分”）；
//在删除中添加
$('', {
文本：“删除步骤”，
类：“图标删除”，
href:“#”
}).appendTo（clonedField）；
//克隆克隆的原始文件并将其追加回列表
$（“#添加成分”）。单击（函数（）{
append（clonedField.clone（））；
返回false；
});
});
即使您为输入字段设置了不同的名称（例如，您没有重复的名称），是否也会触发异常？是的，是的。重复的名称返回一个由
分隔的串联字符串，
您可以共享spring方法吗？
$(document).ready(function(){
    //the click function does not seem to be working in the example, so I have replaced it with this.
    $(document).on('click', '.icon-delete', function(){
        $(this).parent().remove();
    });
    //Keep a single clone of the original
    var clonedField = $('.ingredient_field').clone(), 
    main = $('#dynamic_ingredients');

    // Add in the delete <a>
    $('<a>', {
        text: 'Remove Step', 
        class: 'icon-delete', 
        href: '#'
    }).appendTo(clonedField);

    // Clone the cloned original and append it back to the list
    $('#add-ingredient').click(function() {
        main.append(clonedField.clone());
        return false;
    });
});