Как создать эволютивную форму в angularjs2 с помощью FormBuilder (и фреймворка ionic v2)

У меня работает следующий код, но я не могу отобразить пользовательскую ошибку из ввода или отключить форму, если она неверна. Поэтому я хотел бы преобразовать его в 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>


angular ionic2 angular2-formbuilder
person Kevin Didelot    schedule 30.06.2016    source источник
comment
Это возможно :) Что в этом невозможного?   -  person jhhoff02    schedule 30.06.2016
comment
Потому что я могу сделать что-то подобное, но это не эволюционно. ' : ['студент'], 'класс' : [''], 'данный курс' : [''] });   -  person Kevin Didelot    schedule 30.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это:

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 для каждого вопроса. Как бы то ни было, он просто проверяет, заполнено ли каждое поле.

person morphatic    schedule 04.07.2016
comment
Я обновил код, чтобы вы могли удалить определенные вопросы. - person morphatic; 04.07.2016
comment
Спасибо вам, это работает. Последний вопрос к тебе, потому что ты выглядишь действительно хорошо, ахах. Если я хочу, чтобы массив вариантов соответствовал вопросу, я могу сделать то же самое? - person Kevin Didelot; 04.07.2016
comment
Да, просто добавьте больше полей вместе с каждым вопросом - person morphatic; 04.07.2016
comment
У меня всегда есть проблема, поэтому я публикую новый вопрос > stackoverflow.com/questions/38219449/ - person Kevin Didelot; 06.07.2016