[英]I have a few text boxes that fill when I type in one
I am creating a dynamic form that allows the users to specify what the questions can be and the amount of them which are being stored in a Google Firestore collection. 我正在创建一个动态表单,允许用户指定问题的范围以及存储在Google Firestore集合中的问题数量。 When I fill put one text box the others become filled with the exact same thing. 当我填充一个文本框时,其他文本框将被完全相同的东西填充。
html file: This creates the forms and uses the angular forms module. html文件:这将创建表格并使用角度表格模块。 Add Item 添加项目
<ul *ngFor="let question of questions">
<li><strong>{{question.name}}</strong>
<input type="text" placeholder="Add Title" [(ngModel)] = 'answer.name' name = "title">
</li>
</ul>
<input type="submit" value = "Submit" class = "btn">
</form>
ts file: The ts file gets data from a data service and gives tha to the html. ts文件:ts文件从数据服务获取数据,并将tha提供给html。
@Component({
selector: 'app-add-item',
templateUrl: './add-item.component.html',
styleUrls: ['./add-item.component.scss']
})
export class AddItemComponent implements OnInit {
questions: Question[];
items: Item[];
answers: Answer[];
answer: Answer = {
name:'',
number:0
}
item: Item = {
title:'',
description:'',
}
question: Question = {
name:'',
number:null,
answer:'',
}
database;
doc:'';
constructor(private dataService: DataService, private route: ActivatedRoute) {
this.route.params.subscribe(params => this.doc = params["id"])
}
ngOnInit() {
this.dataService.getQuestions(this.doc).subscribe(questions => {
this.questions = questions;
})
}
onSubmit(){
{
if(this.answer.name != ''){
console.log(this.answer.name)
this.dataService.addAnswer(this.answer);
this.answer.name = "";
}
}
}}
Expected that the text boxes would fill separately and I could record their data. 预计文本框将单独填充,我可以记录其数据。
Actual is that all text boxes get filled at the same time. 实际情况是所有文本框都同时填充。
The following way you can get the separate value from textboxes 您可以通过以下方式从文本框中获取单独的值
<ul *ngFor="let question of questions">
<li><strong>{{question.name}}</strong>
<input type="text" placeholder="Add Title" [(ngModel)] = 'question.answer' name = "title">
</li>
<ul *ngFor="let question of questions"><li><strong>{{question.name}}</strong><input type="text" placeholder="Add Title" [(ngModel)] = 'question.answer' name =title[]></li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.