使用 Angularjs 以编程方式通过名称将表单外的输入发布到表单

Question

我需要将输入发布到表单，而输入位于表单之外。我设法添加了输入，但结果并不是我真正需要的（查看控制台输出）

所以我基本上通过 form.$addControl(outerInput)

将外部 input 元素添加到 form

const MyApp = angular.module('app', []);

MyApp.controller('formCtrl', ['$scope', '$element', function($scope, $element){
  
    $scope.dataModel = {
      name: 'robert arschfick',
      email: 'blabla',
      age: 25,
      text: 'text'
    };
  
  
    $scope.addOuterInputToForm = function(form, inputID){
      // annoying as hell, I am retrieving the input element;
      var input = angular.element(document.getElementById(inputID))[0];
      
      form.$addControl(input);
      console.log(form);
    };
}]);

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app" ng-controller="formCtrl">
  <form ng-submit="" name="testForm">
    <input type="name" ng-model="dataModel.name" name="name" required>
    <input type="email" ng-model="dataModel.email" name="email" required>
    <input type="number" ng-model="dataModel.age">
   
  </form>
  
  <!-- I need to add this input the same way the inner inputs name 
       and email are published to the form, so that it is addressable
       via its name in the form and that it is part of the form.controls
  -->
  <input type="text" required id="inputToAdd" name="text"
         ng-model="dataModel.text">
  <button ng-click="addOuterInputToForm(testForm, 'inputToAdd')">
     Add Control
  </button>
</div>

输入作为控件添加，但对象看起来不同并且没有所有 ng $validators。我还需要按名称将其作为属性添加到 "email" 和 "name" 之类的形式中：

这是添加到表单的外部输入。它遗漏了所有 ng-form 属性见

之后的图像

这是内部以某种方式添加到表单的内部电子邮件输入。它具有所有 ng 表单属性，如 $untouched、$prestine 等。

所以我现在需要的是以编程方式伪造外部输入的内部添加，以便外部输入以与内部输入相同的方式包含在表单中 "email" 和 "name"

对不起我的英语水平，我希望我足够清楚。提前致谢:)

Answer 1

<input> 的 $addControl method needs the ngModelController，而不是 <input> 元素本身。

要获取元素的 ngModelController，请将其包含在具有 ng-form 指令的 div 中：

  <div ng-form="other">
     <input type="text" required id="inputToAdd" name="text"
            ng-model="dataModel.text">
  </div>
  <button ng-click="testForm.$addControl(other.text)">
     Add Control
  </button>

演示

const MyApp = angular.module('app', []);

MyApp.controller('formCtrl', ['$scope', '$element', function($scope, $element){
  
    $scope.dataModel = {
      name: 'robert arschfick',
      email: 'blabla',
      age: 25,
      text: 'text'
    };
  
}]);

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app" ng-controller="formCtrl">
  <form ng-submit="" name="testForm">
    <input type="name" ng-model="dataModel.name" name="name" required>
    <input type="email" ng-model="dataModel.email" name="email" required>
    <input type="number" ng-model="dataModel.age">
   
  </form>
  
  <!-- I need to add this input the same way the inner inputs name 
       and email are published to the form, so that it is addressable
       via its name in the form and that it is part of the form.controls
  -->
  <div ng-form="other">
     <input type="text" required id="inputToAdd" name="text"
            ng-model="dataModel.text">
  </div>
  <button ng-click="testForm.$addControl(other.text)">
     Add Control
  </button>
</div>

使用 Angularjs 以编程方式通过名称将表单外的输入发布到表单

Publishing an Input outside the Form to the Form via name programmatically with Angularjs

javascript

angularjs

ng-controller

angularjs-ng-form

angularjs-forms

演示