如何使用 FormBuilder（和 ionic v2 框架）在 angularjs2 中创建进化形式

Question

我可以使用以下代码，但我无法显示来自输入的自定义错误，也无法在不正确时禁用表单。所以我想把它转换成FormBuilder。但问题是我不知道如何管理表单中的添加和删除问题。

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

 
@Component({
 templateUrl: 'build/pages/add-question/add-question.html',
 providers: [BddService]
})
export class AddQuestionPage {

 public questions;

 constructor(private nav: NavController, private bddService : BddService) {
  this.questions = [];
  this.addQuestion();
 }

 public addQuestion(){
  var question ={
   category:'',
   material:'',
   chapter:''
  }
  this.questions.push(question);
 }

 public removeQuestion(index: number){
  if(this.questions.length > 1){
   delete this.questions[index];
  }
 }

}

<ion-content class="add-question">
  <form #f="ngForm" (ngSubmit)="saveQuestion()">
    <ion-list>
      <div class="question" *ngFor="let question of questions; let i = index ">  
        <ion-item>
          <ion-label stacked>Category</ion-label>
          <ion-input  type="text" [(ngModel)]="questions[i].category" required>
          </ion-input>
        </ion-item>
        <ion-item>
          <ion-label stacked>Material</ion-label>
          <ion-input  type="text" [(ngModel)]="questions[i].material" required>
          </ion-input>
        </ion-item>
      </div>
      <ion-item>
        <button type="button" (click)="addQuestion()" full light>Add Question</button>
      </ion-item>
      <ion-item>
        <button type="submit" full light>Save Question</button>
      </ion-item>
    </ion-list>
  </form>
</ion-content>

Answer 1

试试这个：

import {Component} from "@angular/core";
import {NavController} from "ionic-angular";
import {FormBuilder, ControlArray, Validators} from "@angular/common";

class Question {
    category: string;
    material: string;
    chapter:  string;
}

@Component({
    templateUrl: "build/pages/evolutive/evolutive.html"
})
export class EvolutivePage {

    questions: Array<Question>;
    evolutiveForm: ControlArray;

    constructor(public nav: NavController, private fb: FormBuilder) {

        this.questions = [];
        this.evolutiveForm = new ControlArray([]);
    }

    saveEvolutive($event, questions) {
        $event.preventDefault();
        console.log(questions);
    }

    addQuestion(): void {
        let q = new Question();
        this.evolutiveForm.push(this.fb.group({
            category: [q.category, Validators.required],
            material: [q.material, Validators.required]
        }));
        this.questions.push(q);
    }

    removeQuestion(i: number): void {
        this.questions.splice(i, 1);
        this.evolutiveForm.removeAt(i);
    }
}

对于您的模板：

<ion-content padding class="evolutive">
    <form [ngFormModel]="evolutiveForm" (submit)="saveEvolutive($event, questions)">
        <ion-list>
            <ion-item-group *ngFor="let q of questions; let i = index" ngControlGroup="{{i}}">
                <ion-item-divider light>Question {{+i+1}} <ion-icon name="close" (click)="removeQuestion(i)" item-right></ion-icon></ion-item-divider>
                <ion-item>
                    <ion-label>Category</ion-label>
                    <ion-input ngControl="category" [(ngModel)]="q.category"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Material</ion-label>
                    <ion-input ngControl="material" [(ngModel)]="q.material"></ion-input>
                </ion-item>
            </ion-item-group>
        </ion-list>
        <button block type="button" (click)="addQuestion()">Add Question</button>
        <button block type="submit" [disabled]="!evolutiveForm.valid">Save Player</button>
    </form>
</ion-content>

如果您想添加自定义验证，您可以将它们添加到 addQuestion() 函数中，您可以在其中为每个问题创建新的 ControlGroup。实际上，它只是检查是否已填写每个字段。

如何使用 FormBuilder（和 ionic v2 框架）在 angularjs2 中创建进化形式

How to create an evolutive form in angularjs2 using FormBuilder (And the ionic v2 framework)

angular

ionic2

angular2-formbuilder