Угловые обернутые элементы ngForm?

есть ли угловой способ получить элементы ввода, заключенные в директиву ngForm? (Мне нужно использовать ngForm, это форма asp.net)

angular.module('app',[])
.controller('formCtrl', function($scope){

  $scope.formFields;
  $scope.model={
  
    "text": 'simple text',
    "number": 1,
    "textarea": 'lsadij isdajo\n dasjojoisajijsdaojsdaio jioasdj'
    
  };
  
  $scope.getNgFormInputs = function(e){
  
      $scope.formInfo = $scope.myFrm
      $scope.formFields = angular.noop //??? is it possible to get wrapped inputs?
  
  }


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="formCtrl">
    
    <div ng-bind="model.text"></div>
    <div ng-bind="model.number"></div>
    <pre ng-bind="model.textarea"></pre>
    
    <ng-form name='myFrm'>
      
      <input type="text" ng-model="model.text"><br>
      
      <input type="text" ng-model="model.number"><br>
      
      <textarea ng-model="model.textarea"></textarea><br>
      
      <button ng-click="getNgFormInputs($event)" role="submit">Save</button>
      
      </ng-form>


  {{formInfo}}<hr>
  {{formFields}}
  </div>
</div>

спасибо


angularjs angularjs-ng-form
person egidiocs    schedule 28.04.2016    source источник
comment
Чего вы пытаетесь достичь на более высоком уровне? Это звучит как проблема XY для меня.   -  person JB Nizet    schedule 29.04.2016
comment
Да, это может быть проблема XY. Этот код является просто концепцией. В моем реальном мире (A) $scope.model — это более крупный объект, и я обновляю его часть. (B) Время уходит, поэтому я жестко закодировал элементы формы вместо того, чтобы компилировать их с помощью директивы, которая получает атрибут массива model[prop] (это решило бы мою проблему). (C) Итак, чтобы сэкономить время, я не хочу снова и снова писать [{prop: val}], который уже завернут в мой ngForm. Я также не хочу использовать jQuery. Без кода, всегда. Это проясняет? спасибо   -  person egidiocs    schedule 29.04.2016
comment
@JBNizet, не могли бы вы уточнить, что у вас на уме? В некоторых сценариях ответ Сайеда не применяется. спасибо   -  person egidiocs    schedule 30.04.2016
comment
Я думаю, что выполнение манипуляций с DOM в Angular обычно является запахом дизайна. Вы должны работать над доменом, а не над графическими компонентами в DOM. Но поскольку я понятия не имею, чего вы на самом деле пытаетесь достичь, дать хороший совет невозможно.   -  person JB Nizet    schedule 30.04.2016

Ответы (2)


arrow_upward
0
arrow_downward

Да, есть, если я правильно вас понял. Для справки см. это https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform

Более конкретно: Для быстрого: https://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform#validation-using-ngform

person Syed Ekram Uddin    schedule 28.04.2016
comment
tks, отсутствие атрибута имени во входных элементах заставило меня не осознавать этого. простая строка кода, и все готово: $scope.formFields = Object.keys($scope.myNgForm).filter(x =› (!/^\$/.test(x)) ) - person egidiocs; 29.04.2016

arrow_upward
0
arrow_downward

Благодаря Сайеду эта ссылка решила мою проблему.

Я предлагаю людям прочитать мой собственный комментарий в ответе.

angular.module('app',[])
.controller('formCtrl', function($scope){

  $scope.formFields;
  $scope.model={
  
    "text": 'simple text',
    "number": 1,
    "textarea": 'lsadij isdajo\n dasjojoisa \n jijsdaojsdaio jioasdj'
    
  };
  
  $scope.formFieldsAndValues = {}
  
  $scope.getNgFormInputs = function(e){
  
      
      $scope.formFields = keys = Object.keys($scope.myFrm).filter(x =>  (!/^\$/.test(x)) )
      keys.forEach(x=> $scope.formFieldsAndValues[x] = $scope.myFrm[x].$viewValue)
  
  }


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="formCtrl">
    
    <div ng-bind="model.text"></div>
    <div ng-bind="model.number"></div>
    <pre ng-bind="model.textarea"></pre>
    
    <ng-form name='myFrm'>
      
      <input type="text" ng-model="model.text" name="text"><br>
      
      <input type="text" ng-model="model.number" name="number"><br>
      
      <textarea type="text" ng-model="model.textarea" name="textarea"></textarea><br>
      
      <button ng-click="getNgFormInputs($event)" role="submit">Save</button>
      
      </ng-form>
<hr>
form fields:
  {{formFields}}
    <hr>
field,value pairs:
  {{formFieldsAndValues}}
  </div>
</div>

person egidiocs    schedule 28.04.2016