angular - ngModels を使用して、コンポーネントからビューへの配列を持つ Angular バインディング オブジェクト

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>

*ngFor [ngModel]=question.answers[i].textを[ngModel]="answer.text"で変換しますが、同じ問題があります...

私はさまざまな投稿から多くのことを試しました:オブジェクト入力の配列を持つAngular 2フォーム、 NgForのNgModelを使用したAngular 2-2 Way Binding

ただし、常に多くのプロパティがあり、配列はありません

テンプレート駆動のみで、リアクティブフォームなしでこれを行いたい

デモ：

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);
    }

完成したアプリで結果を表示する

Answer 2

次のようなことができます:-

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"));
  }

}