如何在angularjs2中使用FormBuilder創建演化形式（和離子v2框架）

Question

我有以下代碼工作，但是我無法顯示輸入自定義錯誤，也不能禁用表單，如果它不正確。所以我想將它轉換爲FormBuilder。但問題是我不知道如何管理表單中的添加和刪除問題。

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

試試這個：

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()添加它們功能在你創建新的每個問題。事實上，它只是檢查，看看每個領域已經填補了。