Получение динамически добавленного значения текстового поля в Angular

Question

Когда я создавал элементы ввода в Angular, у него не было свойства value. Или любое другое свойство, если я не сделаю это вручную. И после этого он не будет обновлять его. Получение элементов по ClassName и высказывание .getAttribute("value") вернет только его начальное значение.

Я установил свойство value вручную с помощью node.setAttribute("value",""). Ввод textbox покажет, что вы печатаете, но запись в консоли, что значение элемента показывает только его начальное значение. Он работает с getElementsByTagName, но я не могу использовать это

Создание текстовых полей

var node;
for (let index = 0; index < 5; index++) {
  node = document.createElement("input")
  node.setAttribute("class", "input");
  node.setAttribute("value", "");
  document.getElementById("boxesDiv").appendChild(node);
} 

Внутри события keydown для проверки значений полей после их ввода

var arr = document.getElementsByClassName('input');
for (let index = 0; index < arr.length; index++) {
  if (arr[index].getAttribute("value") != "") {
    filledCount++;
    console.log("count++")
  }
} 

Ожидается, что консольный журнал "count ++" увидит, когда textbox содержит значение / что-то в нем.

Answer 1

Вы можете сделать это в Angular Way следующим образом.

import { ElementRef } from '@angular/core';

export class YourComponent {

  constructor(private el: ElementRef) {}

  countFilledInputs(): void {
    let arr = this.el.nativeElement.querySelectorAll('input');
    let filledCount = 0
    for (let i = 0; i < arr.length; i++) { 
        if (arr[i].value !== "") { 
          filledCount++; 
        }
    }
    console.log("Filled Input Count => " + filledCount);
  }
}

Демонстрация StackBlitz