Question

我正在尝试使用Angular 2文档来掌握反应形式 https://angular.io/docs/ts/latest/guide/reactive-forms.html。我试图设置表单的方式与他们在教程中的表现方式略有不同，但同样的理论仍然适用。在某个地方，由于存储导入数据的变量console.log()完全正常，form group也完全正常，只有空值，因此我得到了混合的东西。到目前为止，这是我的代码。

问题模型

export class Answers {
    id      = '';
    name    = '';
}

export class QuestionModel {
    question    = '';
    id          = '';
    name        = '';
    answers     : Answers[];
}



export const Question : QuestionModel[] = [
    {
    question: 'How do you feel about your current image?',
    id      : 'img-q1',
    name    : 'img-ques1',
    answers : [
        {
            id      : 'exp0101q',
            answer  : 'Its fine as is.'
        },
        {
            id      : 'exp0102q',
            answer  : 'I want to make minor adjustments.'
        },
        {
            id      : 'exp0103q',
            answer  : 'I want to change my image.'
        },
        {
            id      : 'exp0104q',
            answer  : 'Ive never wanted to use a particular image until now.'
        }
        ]
    }
]

提问服务

import { Injectable }               from '@angular/core';
import { Observable }               from 'rxjs/Observable';
import { of }                       from 'rxjs/observable/of';
import 'rxjs/add/operator/delay';
import { QuestionModel, Answers,
         Question }                 from './question-model';



@Injectable()

export class QuestionService {

    getQuestions(): Observable<QuestionModel>{
        return of (Question);
    }
}

问题组件

import { Component, Input, OnChanges,
         OnInit }                       from '@angular/core';
import { FormControl, FormGroup,
         FormBuilder, FormArray,
         Validators }                   from '@angular/forms';

import { QuestionModel, Answers }       from './question-model';

import { QuestionService }              from './question.service';



@Component({
    moduleId    : module.id,
    selector    : 'question-component',
    //template  : `<h1>question component</h1>`,
    templateUrl : 'question.component.html',
    providers   : [ QuestionService ]
})

export class QuestionComponent implements OnInit, OnChanges {

    question: QuestionModel;
    quesForm: FormGroup;

    constructor(private qservice : QuestionService, private fbuild : FormBuilder) {
        this.createForm();
    }

    createForm() {
        this.quesForm = this.fbuild.group({
            question: '',
            id      : '',
            name    : '',
            answers : this.fbuild.array([])
        });
    }

    ngOnChanges(){
        this.quesForm.setValue({
            question: this.question.question,
            id      : this.question.id,
            name    : this.question.name
        });

        this.setAnswers(this.question.answers);
    }

    ngOnInit(){
        this.qservice.getQuestions().subscribe(Question => {
            this.question = Question;
        });

        console.log(this.question);
        console.log(this.quesForm);
    }

    get answers(): FormArray {
        return this.quesForm.get('answers') as FormArray;
    };

    setAnswers(answers : Answers[]){
        const answersFGs = answers.map(answers => this.fbuild.group(answers));
        const answersFormArray= this.fbuild.array(answersFGs);
        this.quesForm.setControl('answers', answersFormArray)
    }


}

模板

<h1>Question Component</h1>

<form [formGroup]="quesForm" novalidate>
    <fieldset [attr.id]="quesForm.value.id">

        <label>{{quesForm.value.question}}</label>

        <!--<div formGroupName="answers">
                <div *ngFor="let ans of answers">
                    <input type="radio" formControlName="name" 
                    [attr.id]="ans.id"
                    [attr.value]="ans.answer"
                    />
                <label>{{ans.answer}}</label>
            </div>
        </div>-->

    </fieldset>




    <!--<input type="text" formControlName="name" />
    <label>{{quesForm | json}}</label>-->

</form>

<p>{{quesForm.value | json}}</p>
<p>{{quesForm.status | json}}</p>
<p>{{question | json}}</p>

我尝试过的唯一一件就是搬家了

this.quesForm.setValue({
    question: this.question.question,
    id      : this.question.id,
    name    : this.question.name
});

this.setAnswers(this.question.answers);

进入ngOnInit，但正如我所料，我得到一个错误，说需要为question分配一个值，这是因为它试图在数据实际存在之前定义它。我把它移回ngOnChanges，然后又回到空洞。

在教程中，他们设置了submit按钮和函数以及reset函数来更新输入，但据我所知，那些没有任何内容他们设置数据。从它的外观来看，我认为ngOnChanges中的代码是设置值的代码。我对吗？我在这里缺少什么？

Answer 1

由于您希望从数据填充表单，我将从构造函数中删除表单的构建，并在检索数据时构建表单。

这样我们就可以确保我们有值来构建表单。因此，您可以跳过构建空表单（如果您不需要它），并使用您的传入值构建表单。因此OnChanges也可以删除。

在检索数据后构建表单：

    this.qservice.getQuestions().subscribe(Question => {
        this.question = Question;
        this.createForm(); // do this!
    });

您的createForm功能：

createForm() {
    this.quesForm = this.fbuild.group({
        question: this.question.question,
        id      : this.question.id,
        // ..... the rest 
    });
}

为什么没有任何值加载到我的表单组中？

1 个答案: