javascript - 使用 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。另外，我需要按名称将其作为属性添加到表单中，例如“电子邮件”和“名称”是:

这是添加到表单的外部输入。它错过了所有 ng-form 属性，请参阅之后的图像

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

所以我现在需要的是以某种方式以编程方式伪造外部输入​​的内部添加，以便表单以与内部输入“电子邮件”和“姓名”相同的方式包含外部输入

抱歉我的英语水平，我希望我说得足够清楚。预先感谢:)

Answer 1

$addControl 方法需要 ngModelController <input>的，而不是 <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>