Question

我正在尝试编码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>

有人可以帮忙吗？

修改：必须注意，我的bootstrap()方法调用确实包含以下内容：

  disableDeprecatedForms(),
  provideForms(),

我仍然得到这个错误。我所有与表单相关的类都从以下位置导入：

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

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

问题已经整理好了。

嵌套模型驱动形式的例外：“没有值访问器”

1 个答案: