我正在用 Ionic 做一个项目,需要使用 Angular 5 的反应形式。我需要允许用户选择语言偏好,我正在使用 radio-group 和 ion-radio 来做,但是当我做表格的变化,我得到
ERROR Error: There is no FormControl instance attached to form control element with name: 'preferredLanguage'
这是我的表格模板
<ion-header>
<ion-navbar>
<ion-title>User Profile</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form *ngIf="user" [formGroup]="profileForm" (ngSubmit)="saveUser()">
<ion-item>
<ion-label>Display Name</ion-label>
<ion-input type="text" formControlName="displayName"></ion-input>
</ion-item>
<ion-item>
<ion-label>First Name</ion-label>
<ion-input type="text" formControlName="firstName"></ion-input>
</ion-item>
<ion-item>
<ion-label>Last Name</ion-label>
<ion-input type="text" formControlName="lastName"></ion-input>
</ion-item>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Street</ion-label>
<ion-input type="text" formControlName="street"></ion-input>
</ion-item>
<ion-item>
<ion-label>City</ion-label>
<ion-input type="text" formControlName="city"></ion-input>
</ion-item>
<ion-item>
<ion-label>State</ion-label>
<ion-input type="text" formControlName="state"></ion-input>
</ion-item>
<ion-item>
<ion-label>Zip Code</ion-label>
<ion-input type="text" formControlName="zip"></ion-input>
</ion-item>
<ion-list radio-group formControlName="preferredLanguage">
<ion-list-header>
Select Preferred Language
</ion-list-header>
<ion-item>
<ion-label>English</ion-label>
<ion-radio value="en-US"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Spanish</ion-label>
<ion-radio value="es-US"></ion-radio>
</ion-item>
</ion-list>
<button type="submit" ion-button>Submit Profile</button>
</form>
</ion-content>
这是我初始化表单的方法
initProfileForm() {
this.profileForm = this.formBuilder.group({
displayName: [this.user.profile.displayName, Validators.required],
firstName: [this.user.profile.firstName, Validators.required],
lastName: [this.user.profile.lastName, Validators.required],
email: [this.user.profile.email, Validators.required],
street: [this.user.profile.street, Validators.required],
city: [this.user.profile.city, Validators.required],
state: [this.user.profile.state, Validators.required],
zip: [this.user.profile.zip, Validators.required] ,
preferredLanguage: [this.user.profile.preferredLanguage,
Validators.required]
});
}
有没有其他人遇到过这个问题,你是如何解决的?
我最终想出了一个解决方案。这个博客帮助我想出了一个答案:https://robferguson.org/blog/2017/11/19/ionic-3-and-forms/ 显然,radio-group 不能与 formControlName 一起使用,所以我最终使用了这个:
<ion-list radio-group [formControl]="profileForm.controls['preferredLanguage']">
<ion-list-header>
Select Preferred Language
</ion-list-header>
<ion-item>
<ion-label>English</ion-label>
<ion-radio value="en-US"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Spanish</ion-label>
<ion-radio value="es-US"></ion-radio>
</ion-item>
</ion-list>
这解决了问题,因此不再有错误。
对您的 HTML 代码进行一些修改:
<ion-item>
<ion-label>English</ion-label>
<ion-radio value="en-US" formControlName="preferredLanguage"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Spanish</ion-label>
<ion-radio value="es-US" formControlName="preferredLanguage"></ion-radio>
</ion-item>
所以基本上不是在父级上使用它,而是为每个单选按钮单独使用它。这对我有用。
希望对您有所帮助!
get preferredLanguage() {
return this.profileForm.get('preferredLanguage').value;
}
set preferredLanguage(ev: CustomEvent) {
this.profileForm.get('preferredLanguage').patchValue(ev.detail.value);
}
<ion-radio-group [value]="preferredLanguage" (ionChange)="preferredLanguage = $event">
<ion-item>
<ion-label>English</ion-label>
<ion-radio value="en-US"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Spanish</ion-label>
<ion-radio value="es-US"></ion-radio>
</ion-item>
</ion-radio-group>
答案对我不起作用,我不得不恢复使用 [(ngModel)] 并手动设置项目。移动到 ion-list 或 ion-row 的建议似乎使情况变得更糟而不是更好。这与 Ionic 4.
<ion-radio-group [(ngModel)]="controlValue" ngDefaultControl [ngModelOptions]="{standalone: true}" (ionChange)="setControlValue($event)">
声明你的模型变量:
eventId: string = '';
如果需要,将其设置为初始化。并在更改时设置表单控件:
setControlValue($event){
this.myForm.controls['controlValue'].setValue($event?.detail?.value);
}
在表单上需要 ngDefaultControl 否则你会遇到表单问题并且模型选项表明你想使用旧的 ngModel 方法并且不要发出你正在混合两种形式的错误。