0

我可以使用以下代码，但是如果输入不正确，我将无法显示自定义错误，也无法禁用表单。所以我想将其转换为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>

4

1 回答 1

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实际上，它只是检查是否已填写每个字段。

于 2016-07-04T03:26:58.497 回答