with used must inside formgroup formcontrolname angular angular2-forms angular2-formbuilder

angular - inside - formcontrolname must be used with a parent formgroup directive



formGroup espera una instancia de FormGroup (2)

Tengo un ejemplo de formulario básico de Angular 2 RC4 en Plunkr que parece arrojar el siguiente error (en la consola de Chrome DEV)

Aquí está el plunkr

https://plnkr.co/edit/GtPDxw?p=preview

Error:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./App class App - inline template:1:7 ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in. Example: <form [formGroup]="myFormGroup"> ORIGINAL STACKTRACE: Error: formGroup expects a FormGroup instance. Please pass one in. Example: <form [formGroup]="myFormGroup"> at new BaseException (https://npmcdn.com/@angular/[email protected]/src/facade/exceptions.js:27:23) at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:110:19) at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/[email protected]/src/directives/reactive_directives/form_group_directive.js:39:14) at DebugAppView._View_App0.detectChangesInter


Estaba usando formas reactivas y encontré problemas similares. Lo que me ayudó fue asegurarme de configurar un FormGroup correspondiente en la clase. Algo como esto:

myFormGroup: FormGroup = this.builder.group({ dob: ['''', Validators.required] });


Hay algunos problemas en su código

  • <div [formGroup]="form"> fuera de una etiqueta <form>
  • <form [formGroup]="form"> pero el nombre de la propiedad que contiene FormGroup es loginForm por lo tanto, debe ser <form [formGroup]="loginForm">
  • [formControlName]="dob" que pasa el valor de la propiedad dob que no existe. Lo que necesitas es pasar la cadena dob como [formControlName]="''dob''" o formControlName="dob" más formControlName="dob"

Ejemplo de plunker