Ошибка «Значение не существует в элементе HTML» в угловых 6

Question

В Angular 6 у меня есть следующий синтаксис в моем шаблоне

<form [formGroup]="eventEditForm" (ngSubmit)="formSubmit()"  >  
    <div *ngFor='let item of array;let i = index'>                    
       <input id ='myId{{i}}' type="text" value='{{item.name}}' >  
       <button type="button" (click)='edit(item.id,i)' >save</button>                
    </div>     

    <input type="text"  formControlName="eventType"  >                    
    <button type="submit" >Submit</button>                    
 </form>  

Это внутри формы, но я не установил текстовые поля ngFor с formControlName и в моей реактивной формеЯ делаю

  eventEditForm= this.formBuilder.group({        
    eventType:['']
  });

Поскольку array, который создает весь список текстовых полей с помощью ngFor, является динамическим, у меня нет стандартного числа для объявления в formBuilder

.Я получаю список текстовых полей, все с идентификатором вроде myId1, myId2 и т. Д.

Затем в машинописи я набираю

 edit(id,i){
   let name = document.getElementById ( 'myld'+i ).value;
   console.log('name  ', name); 
 }

Это работает, и я могу получитьтекущее значение каждого текстового поля.

Я не получаю ошибок, но код VisualStudio помечает value из let name = document.getElementById ( 'myld'+i ).value; и в сообщении говорится Property value does not exist on type HTMLElement.

Что это значит и как я могу это исправить?Код работает нормально, но я все еще хочу удалить это предупреждение.

Спасибо

Answer 1

В вашей реализации есть несколько проблем, таких как прямой доступ к элементу DOM, что нежелательно.Вы можете изменить свою реализацию как -

html

<div *ngFor='let item of array;let i = index'>                    
   <input type="text" [(ngModel)]='item.name' >  
   <button type="button" (click)='edit(item)' >save</button>                
</div> 

ts

edit(item){
   //let name = document.getElementById ( 'myld'+i ).value; //<-- this is not required.
   console.log('name  ', item.name);  //<-- you can use item for editing
 }