8

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

零件 :

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 form with a array of object inputsAngular 2-2 Way Binding with NgModel in NgFor

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

我想在没有反应形式的情况下做到这一点,只有模板驱动

演示:

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

我想使用与我的对象“答案”不同的函数,例如:answer.getInformation()、getCount()、getInspectMyObject() 等。在我看来,仅迭代我的对象。此功能由我的模型“答案”提供,以便在我看来有一个干净的代码。我想在 *ngFor 中使用我的模型中的许多功能。如果我使用反应形式,我不能使用与我的模型不同的功能,因为我的父对象和我的孩子之间的“链接”被破坏了。

解决了

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

4

5 回答 5

3

问题是,无论input指定什么名称,它都将被视为文本。不应该引用任何ObjectArray。但稍作修改,就有机会获得具有更新数据的相同数据结构。

所有元素都以一种方式绑定,因此使其成为双向绑定。因此,每当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);
    }

在制定的 App 中查看结果

于 2017-09-09T17:27:46.290 回答
0

你可以这样做: -

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

}
于 2017-08-31T18:33:08.450 回答
0

我看到你[ngModel]在你的 html 模板中使用。这只会绑定输入以绑定输出以及您需要使用的[(ngModel)]. 这是使用的常规方式ngModel。我在您的代码中发现另一个错误, name="answer[{{i}}].value"这里的名称是值应该是常量,您将它作为变量提供正确的写法是name="{{answer[i].value}}"

在此处输入图像描述

于 2017-09-05T07:21:54.107 回答
0

使用当前的 Angular 模板驱动表单无法实现以下场景。Angular 团队LINK提出了一个问题。

由于模板驱动的表单使用 ngModel ,因此需要大量返工。Angular Forms 正朝着反应式方法发展,在近乎的功能中,我没有看到此功能被添加到其中。

请使用响应式表单,这formArrayName足以帮助获得所需的结果。

于 2017-09-06T10:04:28.063 回答
0
academicYearTerms: [{
    term_name: {
        type: String,
        default: " "
    },
    term_end: {
        type: Date,
    },
    term_start: {
        type: Date,
    },
}]

在节点 js 中声明

adminpageform = new FormGroup({
    start_date: new FormControl(''),
    end_date: new FormControl(''),
    acadyr_shortcode: new FormControl(''),
    no_terms: new FormControl(''),
    term_name: new FormControl(''),
    term_end: new FormControl(''),
    term_start: new FormControl(''),
    TermsId: new FormControl('')
});

在 ts 中声明如何在表单控件中存储对象值数组

于 2019-12-13T06:46:59.233 回答