嵌套模型驱动表单的异常：“没有值访问器”答案

【问题标题】：Exception with nested model-driven forms: "No value accessor for"嵌套模型驱动表单的异常：“没有值访问器”
【发布时间】：2016-07-24 14:16:54
【问题描述】：

我正在尝试编写一个 angular2 模型驱动表单，其模型暗示了一个嵌套结构，我得到以下异常：

No value accessor for 'signupInfo -> userAccount -> userAccountType'

这是组件类的相关部分：

ngOnInit() {
    this.signupForm = this.formBuilder.group({
      signupInfo: this.formBuilder.group({
        userAccount: this.formBuilder.group({
          userAccountType: [this.signupInfo.userAccount.userAccountType, [Validators.required]],
          email: [this.signupInfo.userAccount.email, [Validators.required /*,Validators.pattern(EMAIL_PATTERN), EmailValidators.emailAvailable()*/]],
          firstName: [this.signupInfo.userAccount.firstName, [Validators.required, Validators.minLength(2), Validators.maxLength(35), /*,Validators.pattern(FIRST_NAME_PATTERN)*/]]
        }),
        plainPassword: [this.signupInfo.plainPassword, [Validators.required, Validators.minLength(6)]],
        placeId: [this.signupInfo.placeId, [Validators.required]]
      })
    });
  }

这是组件模板中的相关部分：

<form [formGroup]="signupForm" (ngSubmit)="signup()" class="col-xs-12" novalidate role="form">
    <h4>{{'SIGNUP_FORM.ROLE_PREFIX' | translate}}</h4>
    <fieldset formGroupName="signupInfo">
        <fieldset formGroupName="userAccount">
            <div class="btn-group Choix col-xs-12 text-center" [ngClass]="getCssClasses(signupForm, signupRole)">
                <label class="btn StateButton col-xs-6"
                       uib-btn-radio="'PARENTS_TYPE'"
                       formControlName="userAccountType">
                    <img class="img-responsive" src="assets/media/img/parents.svg"/>
                    <span class="help-block">{{'DOMAIN_ENUM.' + 'ROLE_BASIC_PARENTS' | translate}}</span>
                </label>
                <label class="btn StateButton col-xs-6"
                       uib-btn-radio="'CHILDCARE_WORKER_TYPE'"
                       formControlName="userAccountType">
                    <img class="img-responsive" src="assets/media/img/professionel.svg"/>
                    <span class="help-block">{{'DOMAIN_ENUM.' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
                </label>

                <div [hidden]="signupForm.valid">
                    <div *ngIf="signupForm?.controls?.signupInfo?.controls?.userAccountType?.errors?.required" class="control-label">
                      {{'SIGNUP_FORM.ROLE_REQUIRED'| translate}}
                    </div>
                </div>
            </div>

有人可以帮忙吗？

edit：需要注意的是我的bootstrap()方法调用确实包含以下内容：

  disableDeprecatedForms(),
  provideForms(),

我仍然收到此错误。此外，我所有与表单相关的类都从以下位置导入：

import {FormBuilder, FormGroup, Validators, REACTIVE_FORM_DIRECTIVES} from "@angular/forms";

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

将我的表单更改为使用无线电输入后，如下所示：

<form [formGroup]="signupForm" (ngSubmit)="signup()" class="col-xs-12" novalidate role="form">
    <h4>{{'SIGNUP_FORM.ROLE_PREFIX' | translate}}</h4>
    <fieldset formGroupName="signupInfo">
        <fieldset formGroupName="userAccount">
            <div class="btn-group Choix col-xs-12 text-center" [ngClass]="getCssClasses(signupForm, signupRole)">
                <input class="btn StateButton col-xs-6"
                       id="parent"
                       type="radio"
                       value="'PARENTS_TYPE'"
                       title="Parents"
                       formControlName="userAccountType"/>
                <label for="parent">
                      <img class="img-responsive" src="assets/media/img/parents.svg"/>
                      <span class="help-block">{{'DOMAIN_ENUM.' + 'ROLE_BASIC_PARENTS' | translate}}</span>
                </label>
                <input class="btn StateButton col-xs-6"
                       id="childcare_worker"
                       type="radio"
                       value="'CHILDCARE_WORKER_TYPE'"
                       title="Childcare worker"
                       formControlName="userAccountType"/>
                <label for="childcare_worker">
                      <img class="img-responsive" src="assets/media/img/professionel.svg"/>
                      <span class="help-block">{{'DOMAIN_ENUM.' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
                </label>
                <div [hidden]="signupForm.valid">
                    <div *ngIf="signupForm?.controls?.signupInfo?.controls?.userAccountType?.errors?.required" class="control-label">
                      {{'SIGNUP_FORM.ROLE_REQUIRED'| translate}}
                    </div>
                </div>
            </div>

问题已解决。

【讨论】：