次のコードを使用していますが、入力からカスタムエラーを表示したり、フォームが正しくない場合は無効にすることはできません。ですので、FormBuilder
に変換したいと思います。しかし問題は、フォームの追加と削除の管理方法がわからないことです。FormBuilder(およびiony v2フレームワーク)を使用してangularjs2でEvolutiveフォームを作成する方法
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>
それは不可能だと思われるものはありますか?私はこのような何かを行うことができますが、それは進化ではないです – jhhoff02
ので\t this.addUserForm = this.formBuilder.group({ \t \t \t 'ユーザ名':[ ''、Validators.required]、 \t \t \t 'パスワード': [ ''、Validators.required]、 \t \t \tの役割 ':[ '学生']クラス、\t \t \t '':[ '']、 \t \t \t 'givenCourse':[ '']} ); –