在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
等ID。
然后在打字稿中做
edit(id,i){
let name = document.getElementById ( 'myld'+i ).value;
console.log('name ', name);
}
这有效,我可以获取每个文本字段的当前值。
我没有收到任何错误,但是VisualStudio代码标记了value
的{{1}},并且消息显示let name = document.getElementById ( 'myld'+i ).value;
。
这是什么意思,我该如何解决?该代码可以正常工作,但我仍然想删除该警告。
谢谢
答案 0 :(得分:1)
您的实现几乎没有问题,例如您不建议直接访问DOM元素。您可以将实现更改为-
<div *ngFor='let item of array;let i = index'>
<input type="text" [(ngModel)]='item.name' >
<button type="button" (click)='edit(item)' >save</button>
</div>
edit(item){
//let name = document.getElementById ( 'myld'+i ).value; //<-- this is not required.
console.log('name ', item.name); //<-- you can use item for editing
}