Как читать флажки, созданные в шаблоне Angular 6 - PullRequest
Новая
       22

Как читать флажки, созданные в шаблоне Angular 6

0 голосов
/ 19 декабря 2018

У меня есть несколько флажков, создаваемых таким образом: 

  <table>
  <tr class='collectionList' *ngFor="let option of configurationTemplate">
    <td class='formLabel'>{{option.name}}</td>
    <td>
    <ng-container *ngIf="option.type == 'boolean'">
      <input class='configurationForm' id='id-{{option.name}}' type='checkbox' name="{{option.name}}"  [checked]="option.value"  [(ngModel)]="option.value"   />
    </ng-container>
    </td>
  </tr>
  </table>

Когда я нажимаю кнопку, я запускаю метод в своем контроллере, который делает это: 

var elements = document.getElementsByClassName('configurationForm');
    var obj = {};
    for(var i=0; i<elements.length; i++) {
      var element = elements[i];
      var name = element.id.replace("id-", "");
      if(element.className.indexOf('dirty')>-1) {
        //console.log(element.id);
        obj[name] = 1;
      } else {
        //console.log(element.id);
        obj[name] = 0;
      }

    }

Проблемав том, что в элементах, через которые я зацикливаюсь, нет свойства, чтобы сказать мне, проверены ли они.В итоге я посмотрел на className (как вы видите) - но это не работает, когда флажки не были изменены.Я просто хочу, чтобы проверенное свойство определяло, установлен ли флажок или нет, но Angular, похоже, его не предоставляет.Есть идеи, что я делаю не так?Этот материал очень прост с простым (без фреймворка) Javascript.

1 Ответ

0 голосов
/ 20 декабря 2018

Вам необходимо привести элемент к HtmlInputElement, см. Код ниже: 

var elements = document.getElementsByClassName('configurationForm');
var obj = {};
for(var i=0; i<elements.length; i++) {
  var element = <HTMLInputElement>elements[i];
  var name = element.id.replace("id-", "");
  if(element.className.indexOf('dirty')>-1) {
    console.log(element.checked);
    //console.log(element.id);
    obj[name] = 1;
  } else {
    //console.log(element.id);
    obj[name] = 0;
  }

}
...