标准输入未添加到 Angularjs 表单 $Scope答案

【问题标题】：Standard inputs not being added to Angularjs Form $Scope标准输入未添加到 Angularjs 表单 $Scope
【发布时间】：2015-11-24 07:03:12
【问题描述】：

好的，那么一些背景故事。我们正在为我们的应用程序使用 Angularjs 1.3.15，并动态地将表单元素添加到表单中。查看表单的范围时，普通输入元素不存在，但 ui-select 和 tags-input 元素存在。下面是指令代码和我们动态元素的模板之一的代码。

这是指令代码

return {
        restrict: 'E',
        link: function(scope , iElement, iAttrs) {

          var display = iAttrs.data;

          $http.get('views/templates/tripTemplates/' + display, {cache: $templateCache}).success(function(tplContent){
            iElement.replaceWith($compile(tplContent)(scope));                
          });              
        } 
    }

这是元素代码

<input type="number" class="form-control" step="any" min="{{field.MinValue}}" 
name="{{field.FieldId}}" max="{{field.MaxValue}}" 
ng-required="{{field.Required}}" ng-model="Trip[field.FieldId]" 
ng-change="makeDirty(field.FieldId); setDirty(field);" ng-disabled="locked == true">

这是使用指令的地方

<form name="trip_form_constraints.trip" role="form" class="form-validation" data-ng-submit="save(Trip)">
        <div class="panel-body" style="margin-bottom:9px;">
            <div class="form-group">
                <div class="row" ng-repeat="row in Rows">
                    <div ng-repeat="field in row">
                        <div class="col-sm-3 col-md-{{field.Width}} col-lg-{{field.Width}}" style="padding-bottom:7px;">
                            <label tabindex="-1">{{field.Label}}</label>
                            <div>
                                <display-element data="{{field.Template}}"></display-element>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <input type="submit" class="btn btn-w-md btn-gap-v btn-success" value="Save" ng-disabled="tripSaveDisabled" ng-if="Locked == false"/>
            <div ng-if="Form.Name == 'Charter Ticket'">
                <a tabindex="-1" href="" data-tooltip="If there is no catch to add, proceed to submitting this trip." data-tooltip-placement="right" data-tooltip-append-to-body="true">Is this a trip with no catch?</a>
            </div>
        </div>
       </form>

工作模板 html

<ui-select ng-model="Trip[field.FieldId]" name="{{field.FieldId}}" theme="bootstrap" ng-required="{{field.Required}}" ng-if="field.Data.length > 1 && field.ParentFieldId != 0" ng-change="makeDirty(field.FieldId)" ng-disabled="locked == true">
    <ui-select-match allow-clear="true">{{$select.selected.Name}}</ui-select-match>
    <ui-select-choices repeat="data.Id as data in field.Data | filter: $select.search | filter: filterByParent(field.ParentFieldId)">
        <div ng-bind-html="data.Name | highlight:$select.search"></div>
    </ui-select-choices>
</ui-select>

我尝试过使用 ng-forms 和嵌套表单。我也尝试过创建一个表单列表，例如 myForm.form 但这没有用。我什至升级到 angular 1.4.5，但这也无济于事。任何帮助将不胜感激。我还使用 $timeout 来确保在检查表单之前完全加载表单。

这里是显示正常输入元素未添加到表单的 plunkr。您可以通过 console.log 查看完整的表格或填写数字部分并单击保存。然后，这会将附加到表单范围的所有元素添加到底部的数组中。希望这可以帮助。 http://plnkr.co/edit/C4ysZwEqjhaUA89vxjWP?p=preview

【问题讨论】：

你能提供样品plunkr吗？
什么样的标准输入？
如果您无法创建 jsfiddle 或 plunkr / 添加一个可以比较的元素模板。
我会在 plunkr 上工作并在完成后发布。标准输入是和日期选择器。

标签： javascript html angularjs forms angular-directive

【解决方案1】：

我们弄清楚发生了什么。我们最终使用了 ng-forms 指令并创建了两个不同的命名表单，一个主表单和一个辅助表单。在此之后，辅助表单允许我们执行客户端表单输入错误。

【讨论】：