角度绑定对象，数组从组件到使用ngModels进行查看 [英] Angular binding object with array from component to view with ngModels
问题描述
我试图将模型绑定到我的视图上，但是在提交表单时遇到了一个问题:我没有数组，但是有很多属性.
I tried to bind my model on my view, but I have a problem when I submit my form : I don't have an array, but many property.
组件:
export class QuizFormAddQuestionComponent implements OnInit {
public question: Question;
constructor() {
this.question = new Question();
}
ngOnInit() {
this.question.setModel({ question: 'test' });
this.question.setAnswers(3);
}
createQuestion(form) {
console.log(form.value);
}
}
我的模板:
<hello name="{{ name }}"></hello>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<form #form="ngForm" (ngSubmit)="createQuestion(form)" class="mt-4">
<div class="form-row">
<div class="form-group col-md-12">
<label for="question" class="col-form-label">Question</label>
<input type="text"
class="form-control"
id="question"
placeholder="Enter your question..."
name="question"
[ngModel]="question.question"
required>
</div>
</div>
<div class="form-group row" *ngFor="let answer of question.answers; let i = index;">
<div class="col-sm-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
id="answer-value-{{i}}"
[ngModel]="question.answers[i].value"
name="answers[{{i}}].value">
Answer {{ i }}
</label>
</div>
<input type="text"
class="form-control"
id="answer-text-{{i}}"
[ngModel]=question.answers[i].text
name="answers[{{i}}].text">
{{ answer.getManipulateObjet() }}
</div>
</div>
<div class="form-row">
<div class="form-froup col-md-12 text-right">
<button type="submit" class="btn btn-primary">Add question</button>
</div>
</div>
</form>
</div>
</div>
question.ts(模型)
question.ts (model)
import { Answer } from "./answer";
export class Question {
constructor(private question: string = '',
private answers: any[] = [],
private more_informations: string = '',
private difficulty: number = 0,) {
}
setModel(obj) {
Object.assign(this, obj);
}
addAnswer() {
let new_answer = new Answer();
new_answer.setModel({ text: 'test', value: false });
this.answers.push(new_answer);
}
setAnswers(number_answers) {
for (let i = 0; i < number_answers; i++) {
this.addAnswer();
}
console.log(this);
}
}
answer.ts(模型)
answer.ts (model)
export class Answer {
constructor(private text: string = '',
private value: boolean = false,) {
}
setModel(obj) {
Object.assign(this, obj);
}
getManipulateObjet() {
return '=== call getManipulateObjet() for example : return more information after manipulating object, count value properties, concat, etc... ===';
}
getCount() {
// ....
}
getInspectMyObject() {
// ...
}
}
初始对象:
提交后进入控制台:
提交后，我想要与初始对象相同的东西(具有更新的数据的相同结构)，提交前后的相同数据结构
在我看来，我尝试过此操作，但这不起作用:
I tried this on in my view, but it doesn't work :
<div class="form-group row" *ngFor="let answer of question.answers; let i = index;">
<div class="col-sm-12">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
id="answer-value-{{i}}"
[ngModel]="answer.value"
name="answer[{{i}}].value">
Answer {{ i }}
</label>
</div>
<input type="text"
class="form-control"
id="answer-text-{{i}}"
[ngModel]=answer.text
name="answer[{{i}}].text">
{{ answer.getManipulateObjet() }}
</div>
</div>
我通过 [ngModel] ="answer.text" 转换了* ngFor [ngModel] = question.answers [i] .text ，但我拥有同样的问题...
I transform in the *ngFor [ngModel]=question.answers[i].text by [ngModel]="answer.text", but I have the same problem...
我尝试了来自不同帖子的许多内容:带有数组的Angular 2形式对象输入 ，角度2-2方式绑定在NgFor中使用NgModel
I tried many things from differents posts : Angular 2 form with array of object inputs, Angular 2 - 2 Way Binding with NgModel in NgFor
但是总是有很多属性并且没有数组
But always many properties and no array
我想不使用反应形式，而仅使用模板驱动
演示:
https://angular-by7uv1.stackblitz.io/
我想使用与对象"answer"不同的功能，例如:answer.getInformation()，getCount()，getInspectMyObject()等.在我看来，仅对我的对象进行迭代.我的模型答案"提供了此功能，以便在我的视图中包含干净的代码.我想在* ngFor中使用模型中的许多功能.如果使用反应形式，则不能使用与模型不同的功能，因为父对象和子对象之间的链接"已断开.
I would like to use different function from my object 'answer', for example : answer.getInformation(), getCount(), getInspectMyObject() etc.. to iterate on my object only, in my view. This function is provided by my model 'Answer' to have a clean code in my view. I would like use many functions from my model in the *ngFor. If I use the reactive form, I can't use different function from my model because the "link" between my parent object and my childs is broken.
已解决
https://fom-by-template-driven.stackblitz.io
推荐答案
问题是，无论指定什么input名称，它都将被视为纯文本.不应引用任何Object或Array.但是，只要稍加修改，就有机会获得具有更新数据的相同数据结构.
The problem is, whatever the input name specified, it will be considered as just text. Should not reference any Object or Array.But with slight modifications, there is a chance to obtain the same data structure with updated data.
所有元素都以一种方式绑定，因此使其成为两种方式绑定.因此，每当input值更改时，绑定的element值就会更新.
All elements are binded in one way, so make it two way binding. So whenever input value changes, The binded element value updates.
[(ngModel)]="question.question"
使用template driven form进行验证
<form #form="ngForm" (ngSubmit)="createQuestion()" class="mt-4">
...
<button [disabled]="!form.valid"
现在值已验证&在变量question中更新.不需要从表单获取值，使用更新的对象question来创建问题.
Now the values are validated & updated in the variable question.There is no need to get the value from form, use the updated object question to create question.
createQuestion() {
console.log(this.question);
}
这篇关于角度绑定对象，数组从组件到使用ngModels进行查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
