Wie man ein evolutives Formular in angularjs2 mit FormBuilder (und dem ionischen v2-Framework) erstellt

Question

Ich habe den folgenden Code funktioniert, aber ich kann benutzerdefinierte Fehler von Eingabe nicht anzeigen oder deaktivieren Sie das Formular, wenn es nicht korrekt ist. Also ich möchte es in FormBuilder konvertieren. Aber die Probleme sind, dass ich nicht weiß, wie man das Hinzufügen und Entfernen von Fragen im Formular verwaltet.

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

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

 
\t public questions; 
 

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

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

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

 
}

<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

Versuchen Sie folgendes:

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

Und für die Vorlage:

<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> 

Wenn Sie benutzerdefinierte Validierung hinzufügen möchten, können Sie sie in der addQuestion() hinzufügen Funktion, wo Sie die neueerstellenfür jede Frage. Wie es ist, überprüft es nur, um zu sehen, dass jedes Feld ausgefüllt wurde.