如何在 Angular 中获取输入值( element.setAttribute( "[(ngModel)]" ， "Title"不起作用)

Question

我试图获得一个动态创建的输入的值点击

这是代码:

Save(form:NgForm){
const element = document.createElement("input");
element.setAttribute("type", "text")
element.setAttribute("placeholder", "Title")
element.setAttribute("name", "Title")
element.setAttribute("[(ngModel)]", "Title")
element.setAttribute("class","appearance-none block w-full bg-white text-gray-700  border border-gray-400 shadow-inner rounded-md py-3 px-4 leading-tight focus:outline-none focus:border-gray-500");
document.getElementById("title").appendChild(element)  
}

我尝试了这个setAttribute，但它没有工作

element.setAttribute("[(ngModel)]", "Title")

提示:Failed to execute 'setAttribute' on 'Element': '[(ngModel)]'不是一个有效的属性名。

Answer 1

我不太明白你为什么要那样做。但是，如果您不想使用任何角度容量，这意味着您不使用任何html文件，这些<input>标签通过[(ngModel)]与变量绑定，那么不应该。像你这样分配[(ngModel)]

意味着下面的内容不工作，因为它不是htmlinput标签的已知属性。

element.setAttribute("[(ngModel)]", "Title")

因此你应该这样设置值

element.value = "Title";

小技巧这里，你想用Angular的方式存档的东西
如果不需要，只需注释，我会从我的回答

中删除它

<!-- app.component.html -->
<input [(ngModel)]="title" type="text" placeholder="Title" name="Title" class="appearance-none block w-full bg-white text-gray-700  border border-gray-400 shadow-inner rounded-md py-3 px-4 leading-tight focus:outline-none focus:border-gray-500">

// app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class YourComponent {
title: string
save() { 
console.log(this.title)
}
}

Answer 2

Angular不是这样工作的，你可以创建一个变量(或一个变量数组)，然后在.html中使用它来创建输入。例如

//in .ts define an object
inputConfig={type:"text",
placeholder:"Title",
name:"Title",
variable:"title",
class="appearance-none ..."
};
//in .html
<input [type]="inputConfig.type" [placeholder]="inputConfig.placeholder"
[name]="inputConfig.name" [ngClass]="inputConfig.class"
[(ngModel)]="this[inputConfig.variable]">

查看如何使用[(ngModel)]this[inputConfig.variable]

a fool stackblitz

获取变量"title"它只使用在。tsthis.title或。htmltitle