角度绑定对象,使用ngModels从组件到视图的数组

Question

我试图在我的视图上绑定我的模型,但是当我提交表单时我遇到了问题:我没有数组,但有很多属性.

零件 :

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形式,Angular 2 - 与NgFor中的NgModel进行2路绑定

但总是很多属性,没有数组

我想这样做没有被动形式,只有模板驱动

演示:

https://angular-by7uv1.stackblitz.io/

我想在我的对象'answer'中使用不同的函数,例如:answer.getInformation(),getCount(),getInspectMyObject()等...在我的视图中仅迭代我的对象.这个功能由我的模型'Answer'提供,在我的视图中有一个干净的代码.我想在*ngFor中使用我的模型中的许多函数.如果我使用反应形式,我不能使用我的模型中的不同功能,因为我的父对象和我的孩子之间的"链接"被破坏了.

解决了

https://fom-by-template-driven.stackblitz.io

Answer 1

问题是，无论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);
    }

在计算出的应用程序中查看结果