Ionic：ion-radio 值不适用于 formBuilder。名称为“ ”的表单控件没有值访问器
Ionic: ion-radio value doesn't work with formBuilder. No value accessor for form control with name ' '
我正在为移动应用构建表单。
我有两组使用离子收音机的收音机组。一是 select 鱼的性别，一是 select 鱼成功捕获后的命运。我无法让这些无线电输入与 formBuilder 一起工作。
我收到两条错误消息，引用 CatchPage.html 中的第 113 行和第 114 行。除了行号不同，两者完全相同，所以我只在这里放一个。
CatchesPage.html:113 ERROR Error: No value accessor for form control with name: 'catchSex'
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1740)
at FormGroupDirective.addControl (forms.es5.js:4711)
at FormControlName._setUpControl (forms.es5.js:5299)
at FormControlName.ngOnChanges (forms.es5.js:5217)
at checkAndUpdateDirectiveInline (core.es5.js:10790)
at checkAndUpdateNodeInline (core.es5.js:12216)
at checkAndUpdateNode (core.es5.js:12155)
at debugCheckAndUpdateNode (core.es5.js:12858)
at debugCheckDirectivesFn (core.es5.js:12799)
在这些错误之后我得到
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'catchSex'
Error: No value accessor for form control with name: 'catchSex'
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1740)
at FormGroupDirective.addControl (forms.es5.js:4711)
at FormControlName._setUpControl (forms.es5.js:5299)
at FormControlName.ngOnChanges (forms.es5.js:5217)
at checkAndUpdateDirectiveInline (core.es5.js:10790)
at checkAndUpdateNodeInline (core.es5.js:12216)
at checkAndUpdateNode (core.es5.js:12155)
at debugCheckAndUpdateNode (core.es5.js:12858)
at debugCheckDirectivesFn (core.es5.js:12799)
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1740)
at FormGroupDirective.addControl (forms.es5.js:4711)
at FormControlName._setUpControl (forms.es5.js:5299)
at FormControlName.ngOnChanges (forms.es5.js:5217)
at checkAndUpdateDirectiveInline (core.es5.js:10790)
at checkAndUpdateNodeInline (core.es5.js:12216)
at checkAndUpdateNode (core.es5.js:12155)
at debugCheckAndUpdateNode (core.es5.js:12858)
at debugCheckDirectivesFn (core.es5.js:12799)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at Tab.NavControllerBase._fireError (nav-controller-base.js:322)
at Tab.NavControllerBase._failed (nav-controller-base.js:310)
at nav-controller-base.js:365
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4128)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
我的 'catchFate' 广播组也收到类似的错误消息。
HTML 来自 catches.html 的片段。可以在此处查看整个 .html 页面 https://pastebin.com/vKW2vp7F.
<ion-row radio-group [(ngModel)]="catchSexSelection" [ngModelOptions]="{standalone: true}">
<ion-item no-lines>
<h2>Sex</h2>
</ion-item>
<!--FISH SEX-->
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="male"></ion-icon> Male</ion-label>
<ion-radio value="male" formControlName="catchSex"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="female"></ion-icon> Female</ion-label>
<ion-radio value="female" formControlName="catchSex"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>Unknown</ion-label>
<ion-radio value="unknown" formControlName="catchSex"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
包含所有字段和单选按钮的整个表单 selector 在一个表单组中。
<form [formGroup]="addCatchForm" (submit)="addToDb()" novalidate>
...Entire form...
</form>
相关部分来自catches.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthProvider } from '../../providers/auth/auth';
import { ProfileProvider } from '../../providers/profile/profile';
import * as moment from 'moment';
@IonicPage(
{ name: 'CatchesPage' }
)
@Component({
selector: 'page-catches',
templateUrl: 'catches.html',
})
export class CatchesPage {
addCatchForm: FormGroup;
userProfile: any;
userName: string;
catchSpecies: string;
catchSexSelection: string;
catchWeight: number = 0;
catchLength: number = 0;
catchGirth: number = 0;
catchFate: string;
lureType: string;
fate: boolean;
currentDate: string = moment().format();
constructor(public navCtrl: NavController, public navParams: NavParams, public authProvider: AuthProvider, public profileProvider: ProfileProvider, private alertCtrl: AlertController, public formBuilder: FormBuilder) {
this.addCatchForm = formBuilder.group({
catchCaughtBy: ['', Validators.compose([Validators.required])],
catchDate: ['', Validators.compose([Validators.required])],
catchLocation: ['', Validators.compose([Validators.required])],
catchLocationDesc: [''],
catchSpecies: [''],
catchSexSelection: [''],
catchWeight: [''],
catchLength: [''],
catchGirth: [''],
lureModel: [''],
lureType: [''],
lureTechnique: [''],
catchFate: ['']
});
}
Ionic/Angular版本
Ionic Framework: 3.3.0
Ionic App Scripts: 1.3.7
Angular Core: ^4.1.2
Angular Compiler CLI: ^4.1.2
Node: 7.10.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
我不明白为什么会出现这些错误。我在内部为每个 selection 定义了 value 属性，并且每个都有相同的 formControlName。每个都在同一个无线电组内。
我的登录页面使用 formBuilder，它工作正常，但无线电输入让我很头疼。
我决定使用 formBuilder，因为我将来可能想使用某种验证。我只想让功能正常工作，并在深入验证之前使用 addToDb 方法将数据发送到 firebase。
我该怎么办？
改为尝试将控件绑定到组：
<ion-row radio-group formControlName="catchSex" [(ngModel)]="catchSexSelection" [ngModelOptions]="{standalone: true}">
<ion-item no-lines>
<h2>Sex</h2>
</ion-item>
<!--FISH SEX-->
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="male"></ion-icon> Male</ion-label>
<ion-radio value="male"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="female"></ion-icon> Female</ion-label>
<ion-radio value="female"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>Unknown</ion-label>
<ion-radio value="unknown"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
首先不要同时使用Reactive Form和Template Driven Form。
您也可以使用如下方式来避免错误Error: No value accessor for form control with name: 'catchSex'
<ion-row radio-group ngDefaultControl formControlName="catchSex">
<ion-item no-lines>
<h2>Sex</h2>
</ion-item>
<!--FISH SEX-->
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="male"></ion-icon> Male</ion-label>
<ion-radio value="male"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="female"></ion-icon> Female</ion-label>
<ion-radio value="female"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>Unknown</ion-label>
<ion-radio value="unknown"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
要添加 ngDefaultControl 以避免该错误。
我也是这样解决的
我正在为移动应用构建表单。
我有两组使用离子收音机的收音机组。一是 select 鱼的性别，一是 select 鱼成功捕获后的命运。我无法让这些无线电输入与 formBuilder 一起工作。
我收到两条错误消息，引用 CatchPage.html 中的第 113 行和第 114 行。除了行号不同，两者完全相同，所以我只在这里放一个。
CatchesPage.html:113 ERROR Error: No value accessor for form control with name: 'catchSex'
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1740)
at FormGroupDirective.addControl (forms.es5.js:4711)
at FormControlName._setUpControl (forms.es5.js:5299)
at FormControlName.ngOnChanges (forms.es5.js:5217)
at checkAndUpdateDirectiveInline (core.es5.js:10790)
at checkAndUpdateNodeInline (core.es5.js:12216)
at checkAndUpdateNode (core.es5.js:12155)
at debugCheckAndUpdateNode (core.es5.js:12858)
at debugCheckDirectivesFn (core.es5.js:12799)
在这些错误之后我得到
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'catchSex'
Error: No value accessor for form control with name: 'catchSex'
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1740)
at FormGroupDirective.addControl (forms.es5.js:4711)
at FormControlName._setUpControl (forms.es5.js:5299)
at FormControlName.ngOnChanges (forms.es5.js:5217)
at checkAndUpdateDirectiveInline (core.es5.js:10790)
at checkAndUpdateNodeInline (core.es5.js:12216)
at checkAndUpdateNode (core.es5.js:12155)
at debugCheckAndUpdateNode (core.es5.js:12858)
at debugCheckDirectivesFn (core.es5.js:12799)
at _throwError (forms.es5.js:1830)
at setUpControl (forms.es5.js:1740)
at FormGroupDirective.addControl (forms.es5.js:4711)
at FormControlName._setUpControl (forms.es5.js:5299)
at FormControlName.ngOnChanges (forms.es5.js:5217)
at checkAndUpdateDirectiveInline (core.es5.js:10790)
at checkAndUpdateNodeInline (core.es5.js:12216)
at checkAndUpdateNode (core.es5.js:12155)
at debugCheckAndUpdateNode (core.es5.js:12858)
at debugCheckDirectivesFn (core.es5.js:12799)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at Tab.NavControllerBase._fireError (nav-controller-base.js:322)
at Tab.NavControllerBase._failed (nav-controller-base.js:310)
at nav-controller-base.js:365
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4128)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
我的 'catchFate' 广播组也收到类似的错误消息。
HTML 来自 catches.html 的片段。可以在此处查看整个 .html 页面 https://pastebin.com/vKW2vp7F.
<ion-row radio-group [(ngModel)]="catchSexSelection" [ngModelOptions]="{standalone: true}">
<ion-item no-lines>
<h2>Sex</h2>
</ion-item>
<!--FISH SEX-->
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="male"></ion-icon> Male</ion-label>
<ion-radio value="male" formControlName="catchSex"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="female"></ion-icon> Female</ion-label>
<ion-radio value="female" formControlName="catchSex"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>Unknown</ion-label>
<ion-radio value="unknown" formControlName="catchSex"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
包含所有字段和单选按钮的整个表单 selector 在一个表单组中。
<form [formGroup]="addCatchForm" (submit)="addToDb()" novalidate>
...Entire form...
</form>
相关部分来自catches.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthProvider } from '../../providers/auth/auth';
import { ProfileProvider } from '../../providers/profile/profile';
import * as moment from 'moment';
@IonicPage(
{ name: 'CatchesPage' }
)
@Component({
selector: 'page-catches',
templateUrl: 'catches.html',
})
export class CatchesPage {
addCatchForm: FormGroup;
userProfile: any;
userName: string;
catchSpecies: string;
catchSexSelection: string;
catchWeight: number = 0;
catchLength: number = 0;
catchGirth: number = 0;
catchFate: string;
lureType: string;
fate: boolean;
currentDate: string = moment().format();
constructor(public navCtrl: NavController, public navParams: NavParams, public authProvider: AuthProvider, public profileProvider: ProfileProvider, private alertCtrl: AlertController, public formBuilder: FormBuilder) {
this.addCatchForm = formBuilder.group({
catchCaughtBy: ['', Validators.compose([Validators.required])],
catchDate: ['', Validators.compose([Validators.required])],
catchLocation: ['', Validators.compose([Validators.required])],
catchLocationDesc: [''],
catchSpecies: [''],
catchSexSelection: [''],
catchWeight: [''],
catchLength: [''],
catchGirth: [''],
lureModel: [''],
lureType: [''],
lureTechnique: [''],
catchFate: ['']
});
}
Ionic/Angular版本
Ionic Framework: 3.3.0
Ionic App Scripts: 1.3.7
Angular Core: ^4.1.2
Angular Compiler CLI: ^4.1.2
Node: 7.10.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
我不明白为什么会出现这些错误。我在内部为每个 selection 定义了 value 属性，并且每个都有相同的 formControlName。每个都在同一个无线电组内。
我的登录页面使用 formBuilder，它工作正常，但无线电输入让我很头疼。
我决定使用 formBuilder，因为我将来可能想使用某种验证。我只想让功能正常工作，并在深入验证之前使用 addToDb 方法将数据发送到 firebase。
我该怎么办？
改为尝试将控件绑定到组：
<ion-row radio-group formControlName="catchSex" [(ngModel)]="catchSexSelection" [ngModelOptions]="{standalone: true}">
<ion-item no-lines>
<h2>Sex</h2>
</ion-item>
<!--FISH SEX-->
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="male"></ion-icon> Male</ion-label>
<ion-radio value="male"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="female"></ion-icon> Female</ion-label>
<ion-radio value="female"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>Unknown</ion-label>
<ion-radio value="unknown"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
首先不要同时使用Reactive Form和Template Driven Form。
您也可以使用如下方式来避免错误Error: No value accessor for form control with name: 'catchSex'
<ion-row radio-group ngDefaultControl formControlName="catchSex">
<ion-item no-lines>
<h2>Sex</h2>
</ion-item>
<!--FISH SEX-->
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="male"></ion-icon> Male</ion-label>
<ion-radio value="male"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>
<ion-icon name="female"></ion-icon> Female</ion-label>
<ion-radio value="female"></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item no-lines>
<ion-label>Unknown</ion-label>
<ion-radio value="unknown"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
ngDefaultControl 以避免该错误。
我也是这样解决的