如何在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()添加它们功能在你创建新的每个问题。事实上，它只是检查，看看每个领域已经填补了。