离子：离子无线电值不适用于formBuilder。没有名称＆＃39;的表单控件的值访问器＆＃39;

时间：2017-06-24 11:04:23

标签： angular ionic-framework angular2-formbuilder

我正在为移动应用构建表单。

我有两组使用离子无线电的无线电组。一个选择鱼的性别，一个选择鱼成功捕获后的命运。我无法将这些无线电输入与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

我也收到类似的错误消息，我的＆＃39; catchFate＆＃39;无线电基团。

来自catches.html的

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>

包含所有字段和无线电选择器的整个表单位于一个formGroup内。

<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 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

我不明白为什么会出现这些错误。我在每个选择中都定义了value属性，每个都有相同的formControlName。每个都在同一个无线电组内。

我的登录页面使用了formBuilder并且工作正常，但无线电输入让我很头疼。

我决定使用formBuilder，因为我可能希望将来使用某种验证。我只想让功能正常工作，并在深入验证之前使用addToDb方法将数据发送到firebase。

我该怎么办？

2 个答案:

答案 0 :(得分：4)

尝试将控件绑定到组：

<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>

答案 1 :(得分：1)

首先不要同时使用反应形式和模板驱动形式。

您还可以使用以下方法来避免错误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将被添加以避免该错误。

我已经以同样的方式解决了。

相关问题
最新问题