我正在尝试在 Ionic 2 中的页面中使用 FormBuilder。
首先，这是我的环境详细信息：在 Windows 10 上运行，并且运行ionic --version给我2.0.0-beta.35
这是我的package.json文件的一部分：
...
"@angular/common": "2.0.0-rc.3",
"@angular/compiler": "2.0.0-rc.3",
"@angular/core": "2.0.0-rc.3",
"@angular/forms": "^0.3.0",
"@angular/http": "2.0.0-rc.3",
"@angular/platform-browser": "2.0.0-rc.3",
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
"ionic-angular": "2.0.0-beta.10",
"ionic-native": "1.3.2",
"ionicons": "3.0.0"
...
其次，这里涉及到的两个主要文件：
洞察力.ts
import { Component } from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {
REACTIVE_FORM_DIRECTIVES,
FormBuilder,
FormControl,
FormGroup
} from '@angular/forms';
import { App, Insight } from '../../models';
import { InsightProvider } from '../../providers/insight/insight.service';
import { InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo } from './shared';
@Component({
templateUrl: 'build/pages/insight/insight.html',
directives: [REACTIVE_FORM_DIRECTIVES, InsightImage, InsightLabel, InsightLink, InsightQuestion, InsightThought, InsightTodo, InsightVideo],
providers: [App, InsightProvider, FormBuilder]
})
export class InsightPage {
canAdd: boolean;
showDetails: boolean;
newInsight: Insight;
insightForm: FormGroup;
constructor(private insightProvider: InsightProvider,
private params: NavParams) {
this.insightForm = new FormGroup({
type: new FormControl('', []),
todo: new FormControl('', []),
checked: new FormControl(false, []),
imageUrl: new FormControl('', []),
link: new FormControl('', []),
url: new FormControl('', []),
label: new FormControl('', []),
question: new FormControl('', []),
answer: new FormControl('', []),
title: new FormControl('', []),
details: new FormControl('', []),
});
}
ngOnInit() {
this.canAdd = false;
this.showDetails = true;
}
addNewInsight() {
if (this.newInsight.type) {
this.insightProvider.createInsight(this.newInsight)
.subscribe(response => {
this.newInsight.setId(response.data.id);
this.newInsight.title = '';
console.log(response);
});
}
}
deleteClicked(index: number) {
console.log('Clicked on ' + index);
this.insightProvider.deleteInsight(this.newInsight)
.subscribe(data => {
console.log(data);
});
}
}
洞察力.html
<form [ngFormModel]="insightForm" (ngSubmit)="createNewInsight()">
<ion-item>
<ion-label for="type">Insight Type</ion-label>
<ion-select name="type" id="type" [formControl]="type">
<ion-option value="label">Label</ion-option>
<ion-option value="thought">Thought</ion-option>
<ion-option value="link">Link</ion-option>
<ion-option value="question">Question</ion-option>
<ion-option value="todo">Todo</ion-option>
<ion-option value="image">Image</ion-option>
<ion-option value="video">Video</ion-option>
</ion-select>
</ion-item>
<div [ngSwitch]="type">
<insight-image [form]="insightForm" *ngSwitchCase="'image'"></insight-image>
<insight-label [form]="insightForm" *ngSwitchCase="'label'"></insight-label>
<insight-link [form]="insightForm" *ngSwitchCase="'link'"></insight-link>
<insight-question [form]="insightForm" *ngSwitchCase="'question'"></insight-question>
<insight-thought [form]="insightForm" *ngSwitchCase="'thought'"></insight-thought>
<insight-todo [form]="insightForm" *ngSwitchCase="'todo'"></insight-todo>
<insight-video [form]="insightForm" *ngSwitchCase="'video'"></insight-video>
</div>
<button type="submit" block primary text-center (click)="addNewInsight()" [disabled]="!newInsight.type">
<ion-icon name="add"></ion-icon> Add Insight
</button>
</form>
如您所见，我试图将 FormGroup 对象传递给多个组件，以便我可以使用它们。
这是其中一个组件的外观示例（目前的最小版本）：
<ion-item>
<ion-label floating for="link">Link</ion-label>
<ion-input type="text" name="link" id="link" [formControl]="link"></ion-input>
</ion-item>
<ion-item>
<ion-label floating for="url">URL</ion-label>
<ion-input type="text" id="url" name="url" [formControl]="url"></ion-input>
</ion-item>
我现在面临的问题是这个错误：
我相信正在发生的事情是 FormBuilder 正在寻找我在我的打字稿文件中声明的给定名称（例如 todo、imageUrl、link 等），但由于它在我的其他组件中，它会出错，认为它不存在.
此错误的原因可能是什么？我上网查了一下，没有找到相关的问题。
仅供参考，我之所以在组件中而不是在同一页面中需要它们，是因为将来每个输入的功能都会有所不同，因此需要为每个组件赋予“单一职责”。
提前致谢