Exception mit verschachtelten modellgetriebene Formen: „Kein Wert Accessor für“

Question

Ich versuche ein angular2 modellgetriebene Form zu kodieren, deren Modell impliziert eine verschachtelte Struktur und ich erhalte die folgende Ausnahme:

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

Hier ist der relevante Teil der Komponentenklasse:

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]] 
     }) 
    }); 
    } 

Hier ist der relevante Teil der Komponentenvorlage:

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

Kann jemand bitte helfen?

bearbeiten: Es muss darauf hingewiesen werden, dass mein bootstrap() Methodenaufruf folgendes enthält:

disableDeprecatedForms(), 
    provideForms(), 

und ich immer noch diesen Fehler. Auch alle meine Form verwandte Klassen importieren aus:

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

Answer 1

Nach meiner Form zu ändern Funkeingänge wie folgt zu verwenden:

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

die Ausgabe sortiert wurde.