Fatal编程技术网
  • javascript/
  • Javascript 使用ng repeat动态多表单插入，每个表单都有动态文本框来获取值

Javascript 使用ng repeat动态多表单插入，每个表单都有动态文本框来获取值

javascript angularjs

Javascript 使用ng repeat动态多表单插入，每个表单都有动态文本框来获取值,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我正在使用ng form和ng repeat进行动态表单插入，并尝试使用该表单中的文本框来存储多个动态值。 这是我的密码： Want to add Ingredients : <button ng-click="showIngredientForm = !showIngredientForm" ng-class="{'red' : showIngredientForm}">{[{toggleText}]}</button> <div ng-show="showIn

我正在使用ng form和ng repeat进行动态表单插入，并尝试使用该表单中的文本框来存储多个动态值。 这是我的密码：

Want to add Ingredients : <button ng-click="showIngredientForm = !showIngredientForm"  ng-class="{'red' : showIngredientForm}">{[{toggleText}]}</button>
<div ng-show="showIngredientForm">
    <div ng-repeat="formToAdd in formsToAdd" >
        <ng-form name="productFieldForm" >
            <div class="form-group">
                <label>Option Type</label>
                <select name="ingredientName" ng-model="formToAdd.ingredientId" class="form-control">
                    <option value="">Select Option Type Name</option>
                    <option ng-repeat="option in ingredientTypeList" value="{[{option._id}]}">{[{option.ingredientTypeName}]}</option>
                </select>
                <button ng-click="removeForm(formToAdd)" ng-if="formsToAdd.length > 1">Remove</button></div>
            </ng-form>
            <div ng-if="formToAdd.ingredientId">
                <div ng-repeat="itemToAdd in itemsToAdd" >
                    <div class="form-group">
                        <ng-form name="userFieldForm" >
                            <table>
                                <td>
                                    <label>Option Name</label>
<input type="text" placeholder="Option Name" name="ingredientName" ng-model="itemToAdd.ingredientName" ng-pattern="/^[a-zA-Z ]{3,25}$/" class="form-control" autocomplete="off" ng-required="true"  ng-change="verifyDuplicate()" />
<div class="validation_messages" ng-show="userFieldForm.$submitted || userFieldForm.ingredientName.$touched">
                                        <span ng-show="userFieldForm.ingredientName.$error.required">Option cannot be empty</span>
                                        <span ng-show="!userFieldForm.ingredientName.$error.required && userFieldForm.ingredientName.$error.pattern && userFieldForm.ingredientName.$dirty">Option Name Samples Cookie,Saz Mora</span>  
                                    </div>
                                    <div class='validation_messages' ng-if='itemToAdd.isDuplicate'>
                                        <span>Duplicate Not Allowed</span>
                                    </div>
                                </td>
                                <td>
                                    <button ng-click="remove(itemToAdd)" ng-if="itemsToAdd.length > 1">Remove</button>
                                </td>
                            </table>
                        </ng-form>
                    </div>
                </div>
                <div>
                    <button class="validation_messages" ng-click="addNew()">Add new</button>
                </div>
            </div>
    </div>
    <div>
        <button class="validation_messages" ng-click="addForm()">Add new Form</button>
    </div>
</div>
欢迎任何类型的帮助，因为这将帮助我和其他程序员…

您在输入类型中使用单个对象作为
ng model
，而使用具有多个键和值的对象，如
ng model=“itemToAdd.ingredientName[formToAdd.ingrediend]”
这将为id创建一个唯一的键wrt，并将输入文本值分配给该键，从而避免在下一个表单字段中重复出现相同的值

添加
track by
以跟踪列表中的对象，这将帮助我们在添加新字段时创建新的
ng model
对象关键点

 <div ng-repeat="formToAdd in formsToAdd track by formToAdd.ingredientId">
 <div ng-repeat="itemToAdd in itemsToAdd track by $index">
在HTML中

<body ng-controller="MainCtrl">
     Want to add Ingredients :
    <button ng-click="showIngredientForm = !showIngredientForm" ng-class="{'red' : showIngredientForm}">{{toggleText}}</button>
    <div ng-show="showIngredientForm">
        <div ng-repeat="formToAdd in formsToAdd track by formToAdd.ingredientId">
            <ng-form name="productFieldForm">
                <div class="form-group">
                    <label>Option Type</label>
                    <select name="ingredientName" ng-model="formToAdd.ingredientId" class="form-control">
                        <option value="">Select Option Type Name</option>
                        <option ng-repeat="option in ingredientTypeList" value="{{option._id}}">{{option.ingredientTypeName}}</option>
                    </select>
                    <button ng-click="removeForm(formToAdd)" ng-if="formsToAdd.length > 1">Remove</button>
                    <!-- <div class="validation_messages">
                        <span ng-show="validCityingredientTypeName">ingredientType Name is required</span>
                    </div> -->
                </div>
            </ng-form>
            <div ng-if="formToAdd.ingredientId">
                <div ng-repeat="itemToAdd in itemsToAdd track by $index">
                    <div class="form-group">
                        <ng-form name="userFieldForm">
                            <table>
                              <tr>
                                <td>
                                    <label>Option Name</label>
                                    <input type="text" placeholder="Option Name" name="ingredientName" ng-model="itemToAdd.ingredientName[formToAdd.ingredientId]" ng-pattern="/^[a-zA-Z ]{3,25}$/" class="form-control" autocomplete="off" ng-required="true" ng-change="verifyDuplicate()" />
                                    <div class="validation_messages" ng-show="userFieldForm.$submitted || userFieldForm.ingredientName[formToAdd.ingredientId].$touched">
                                        <span ng-show="userFieldForm.ingredientName[formToAdd.ingredientId].$error.required">Option cannot be empty</span>
                                        <span ng-show="!userFieldForm.ingredientName[formToAdd.ingredientId].$error.required && userFieldForm.ingredientName[formToAdd.ingredientId].$error.pattern && userFieldForm.ingredientName[formToAdd.ingredientId].$dirty">Option Name Samples Cookie,Saz Mora</span>
                                    </div>
                                    <div class='validation_messages' ng-if='itemToAdd.isDuplicate'>
                                        <span>Duplicate Not Allowed</span>
                                    </div>
                                </td>
                                <td>
                                    <button ng-click="remove(itemToAdd)" ng-if="itemsToAdd.length > 1">Remove</button>
                                </td>
                              </tr>
                            </table>
                        </ng-form>
                    </div>
                </div>
                <div>
                    <button class="validation_messages" ng-click="addNew()">Add new</button>
                </div>
            </div>
        </div>
        <div>
            <button class="validation_messages" ng-click="addForm()">Add new Form</button>
        </div>
    </div>
  </body>
在HTML中为内部
ng重复
to
itemsToAdd


<div ng-repeat="itemToAdd in itemsToAdd[formToAdd.ingredientId] track by $index">







我们基本上不是创建列表，而是创建
items添加
对象
{}
，并为其分配一个带有列表对象的键，该列表对象分别保存每个表单的新项。
您在输入类型中使用单个对象作为
ng model
，而不是使用具有多个键和值的对象，如
ng model=“itemToAdd.ingredientName[formToAdd.ingredientId]”
这将创建一个唯一的id键，并将输入文本值分配给该键，从而避免在下一个表单字段中重复出现相同的值

添加
track by
以跟踪列表中的对象，这将帮助我们在添加新字段时创建新的
ng model
对象关键点


 <div ng-repeat="formToAdd in formsToAdd track by formToAdd.ingredientId">
 <div ng-repeat="itemToAdd in itemsToAdd track by $index">


在HTML中


<body ng-controller="MainCtrl">
     Want to add Ingredients :
    <button ng-click="showIngredientForm = !showIngredientForm" ng-class="{'red' : showIngredientForm}">{{toggleText}}</button>
    <div ng-show="showIngredientForm">
        <div ng-repeat="formToAdd in formsToAdd track by formToAdd.ingredientId">
            <ng-form name="productFieldForm">
                <div class="form-group">
                    <label>Option Type</label>
                    <select name="ingredientName" ng-model="formToAdd.ingredientId" class="form-control">
                        <option value="">Select Option Type Name</option>
                        <option ng-repeat="option in ingredientTypeList" value="{{option._id}}">{{option.ingredientTypeName}}</option>
                    </select>
                    <button ng-click="removeForm(formToAdd)" ng-if="formsToAdd.length > 1">Remove</button>
                    <!-- <div class="validation_messages">
                        <span ng-show="validCityingredientTypeName">ingredientType Name is required</span>
                    </div> -->
                </div>
            </ng-form>
            <div ng-if="formToAdd.ingredientId">
                <div ng-repeat="itemToAdd in itemsToAdd track by $index">
                    <div class="form-group">
                        <ng-form name="userFieldForm">
                            <table>
                              <tr>
                                <td>
                                    <label>Option Name</label>
                                    <input type="text" placeholder="Option Name" name="ingredientName" ng-model="itemToAdd.ingredientName[formToAdd.ingredientId]" ng-pattern="/^[a-zA-Z ]{3,25}$/" class="form-control" autocomplete="off" ng-required="true" ng-change="verifyDuplicate()" />
                                    <div class="validation_messages" ng-show="userFieldForm.$submitted || userFieldForm.ingredientName[formToAdd.ingredientId].$touched">
                                        <span ng-show="userFieldForm.ingredientName[formToAdd.ingredientId].$error.required">Option cannot be empty</span>
                                        <span ng-show="!userFieldForm.ingredientName[formToAdd.ingredientId].$error.required && userFieldForm.ingredientName[formToAdd.ingredientId].$error.pattern && userFieldForm.ingredientName[formToAdd.ingredientId].$dirty">Option Name Samples Cookie,Saz Mora</span>
                                    </div>
                                    <div class='validation_messages' ng-if='itemToAdd.isDuplicate'>
                                        <span>Duplicate Not Allowed</span>
                                    </div>
                                </td>
                                <td>
                                    <button ng-click="remove(itemToAdd)" ng-if="itemsToAdd.length > 1">Remove</button>
                                </td>
                              </tr>
                            </table>
                        </ng-form>
                    </div>
                </div>
                <div>
                    <button class="validation_messages" ng-click="addNew()">Add new</button>
                </div>
            </div>
        </div>
        <div>
            <button class="validation_messages" ng-click="addForm()">Add new Form</button>
        </div>
    </div>
  </body>


在HTML中为内部
ng重复
to
itemsToAdd


<div ng-repeat="itemToAdd in itemsToAdd[formToAdd.ingredientId] track by $index">







我们基本上是创建
itemsToAdd
object
{}而不是列表
并为其分配一个带有列表对象的键，该对象分别保存每个表单的新项。
如果我在第一个表单textbox中添加一个值，该值也会反映在其他动态表单中…我需要解决此问题的方法…我已经实现了在单个表单中动态插入textbox值，但当我T是动态的多个形式，然后我就陷入了这个问题……你可以从中得到一些想法，而不是精确的解决方案，作为指导。我已经在PaskPro中复制了我的问题的副本。我需要解决这个问题的方法…我已经实现了用单个表格动态插入Tabbox的值，但是当它像上面那样动态地出现多个表单时，我就陷入了这个问题……你可以从中得到一些想法，而不是精确的解决方案，作为指南。我已经在PaskPL中复制了我的问题的副本。看看它@jigarprajapathi@Angular_10我已经检查了你的代码，但问题仍然存在，比如文本框及其值在表单中的重复。例如，第二和第三表单和goes。你不能有比下拉列表中的值更多的新表单，因为键将在ng模型中重复，所以请尝试增加下拉列表值在这方面帮助我获得符合我要求的准确输出，以便对其他人也有帮助…我尝试过你的建议，但仍然无法获得…如果你在plunker中复制你的输出将非常好…你尝试过我在解决方案中提供的plunker吗？有帮助吗？是的，这帮助了我，但我仍然无法摆脱副本e每个表单中出现的文本框…我已经想出了一个更新来看看这个plunk并帮助我实现输出Hi@Angular_10我已经检查了您的代码，但问题仍然存在，例如表单中的文本框及其值的重复。例如，第二和第三个表单和goes。您的新表单不能超过我提供的值的数量n dropdown作为键将在ng模型中重复，因此t尝试增加下拉值。请您在这方面提供帮助，以获得符合我要求的确切输出，这样也将有助于其他人…我尝试了您的建议，但仍然无法获得…如果您在plunker中复制您的输出将非常好…您尝试了plunker吗在解决方案中漫游？这有帮助吗？是的，这对我有帮助，但我仍然无法摆脱出现在每个表单中的重复文本框…我已经想出了一个更新来看看这个plunk并帮助我实现输出

<div ng-repeat="itemToAdd in itemsToAdd[formToAdd.ingredientId] track by $index">