带有ngModels查看组件的角度绑定对象
我试图在我的视图上绑定我的模型，但在提交表单时遇到了问题：我没有数组，但有很多属性。
零件 ：
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（模型）
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（模型）
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() {
// ...
}
}
初始对象：
控制台提交后：
提交之后，我想和初始对象（与数据更新的结构相同）相同，提交前后的数据结构相同
我在我看来试过这个，但它不起作用：
<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中 转换 ，但我遇到了同样的问题...
我尝试了很多不同的帖子：Angular 2 form与对象输入数组，Angular 2 - 2与NgModel绑定在NgFor中
但总是有很多属性，并没有数组
我想这样做没有反应形式，只有模板驱动
演示：
https://angular-by7uv1.stackblitz.io/
我想从我的对象的“答案”中使用不同的函数，例如：answer.getInformation（），getCount（），getInspectMyObject（）等等..只在我的视图中迭代我的对象。 该功能由我的模型“答案”提供，在我的视图中有一个干净的代码。 我想在* ngFor中使用我模型中的许多函数。 如果我使用反应形式，我不能在我的模型中使用不同的功能，因为我的父对象和我的孩子之间的“链接”被破坏。
解决了
https://fom-by-template-driven.stackblitz.io
问题是，无论指定的input名称是什么，它都将被视为文本。 不应引用任何Object或Array 。但稍作修改，就有机会获得具有更新数据的相同数据结构。
所有元素都以一种方式绑定，因此可以双向绑定。 所以无论何时input值改变，绑定element值都会更新。
[(ngModel)]="question.question"
使用template driven form进行验证
<form #form="ngForm" (ngSubmit)="createQuestion()" class="mt-4">
...
<button [disabled]="!form.valid"
现在，这些值在变量question中得到验证和更新。不需要从表单中获取值，可以使用更新的对象question来创建问题。
createQuestion() {
console.log(this.question);
}
在制定出应用程序时查看结果
你可以做这样的事情： -
import {Component, OnInit} from '@angular/core';
import {FormGroup, FormArray, FormControl} from '@angular/forms';
@Component({
selector: 'form-component',
template: `
<form [formGroup]="formGroup">
<div formArrayName="inputs" *ngFor="let control of formArray; let i = index;">
<input placheholder="Name please" formControlName="{{i}}"/>
</div>
</form>
<button (click)="addInput()">Add input</button>
`
})
export class FormComponent implements OnInit{
formGroup: FormGroup;
contructor() {
}
ngOnInit(){
this.formGroup = new FormGroup({
inputs: new FormArray([
new FormControl("Hello"),
new FormControl("World"),
]);
});
}
get formArray() {
return this.formGroup.get('inputs').controls
}
addInput(){
this.formArray.push(new FormControl("New Input"));
}
}
我看到你在你的html模板中使用[ngModel] 。 这只会绑定输入以绑定输出，您还需要使用[(ngModel)] 。 这是使用ngModel的常规方法。 我发现在你的代码中出现了另一个错误： name="answer[{{i}}].value"这里name的值应该是常量，你把它当作变量，正确的写法是name="{{answer[i].value}}"
上一篇: Angular binding object with array from component to view with ngModels