【发布时间】：2017-11-02 08:01:27
【问题描述】：
我想在 Ionic 2 中构建一个表单，我想在其中显示一个切换列表（每个切换代表一项运动）。
从数据库中检索的运动列表我试图在 subscribe() 函数中初始化我的表单，但看起来视图抛出了一个错误，因为在解析 [formGroup] 属性时，表单没有还存在...
在我看来
<form [formGroup]="accountForm">
<ion-list>
<!-- Personal info -->
<ion-list-header padding-top>
Informations personnelles
</ion-list-header>
<ion-item>
<ion-label stacked>Prénom</ion-label>
<ion-input formControlName="firstname" [value]="(user | async)?.info.firstname" type="text"></ion-input>
</ion-item>
<!-- Sport info -->
<ion-list-header padding-top>
Mes préférences sportives
</ion-list-header>
<ion-list formArrayName="sports">
<ion-item *ngFor="let sport of accountForm.controls.sports.controls; let i = index" [formGroupName]="i">
<ion-label>{{sport.name | hashtag}}</ion-label>
<ion-toggle formControlName="{{sport.name}}"></ion-toggle>
</ion-item>
</ion-list>
</ion-list>
</form>
在我的控制器中
ionViewDidLoad() {
console.log('MyAccountPage#ionViewDidLoad');
// Retrieve the whole sport list
this.sportList$ = this.dbService.getSportList();
this.sportList$.subscribe(list => {
// Build form
let sportFormArr: FormArray = new FormArray([]);
for (let i=0; i < list.length; i++) {
let fg = new FormGroup({});
fg.addControl(list[i].id, new FormControl(false));
sportFormArr.push(fg);
}
this.accountForm = this.formBuilder.group({
firstname: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
company: [''],
sports: sportFormArr
});
console.log('form ', this.accountForm);
})
// Toggled sports already registered to by user
}
我尝试在 constructor() 中创建表单，然后使用 addControl() 添加运动 FormArray。这解决了 [formGroup] 错误（当然），但会产生一个关于“运动”控件未实例化的新错误（我猜还没有）。
有什么想法吗？
【问题讨论】：
-
要么先构建一个空表单，然后再修补该值。或者使用布尔标志在表单构建之前不显示表单:)
-
感谢@AJT_82 的回答！我了解标志解决方案，但我不确定我是否了解空表单解决方案。当视图解析不同的控件时会出错吗？
-
好吧，如果您确定数据即将到来，那么布尔标志是一个明智的解决方案，并且您最初不需要显示表单，无论是否为空。我对“空表单”的意思只是您构建了一个与当前结构相同的空表单，您只是不设置任何值。然后不会抛出错误，因为没有要设置的值，表单只是空的。但如前所述，如果您知道数据即将到来，则可以使用布尔标志，如果没有数据到来，则无需显示表单。
-
和补丁值，我的意思是你可以使用
patchValue函数，它可用于formgroup。收到数据后将值设置为表单。 -
完美，再次感谢@AJT_82！
标签： angular typescript ionic2 angular-reactive-forms