錯誤 formControlName 必須與父 formGroup 指令一起使用。您需要添加一個 formGroup

Question

我是 angular 8 的新手，在這一點上，我正在嘗試將舊項目從 angular Js 遷移到 angular，並且一切順利，直到出現可怕的錯誤 formControlName must be used with a parent formGroup 指令。 您需要添加一個 formGroup ....

我已經閱讀並嘗試了幾乎所有找到的解決方案，但沒有 Joy。 希望有仁慈的靈魂可以幫助我？

問題摘要。 我的登錄、注冊和忘記傳遞表單都使用相同的方法並且工作正常，但是我的完整應用程序中的表單會引發該錯誤。

為了更容易理解，我盡可能地剝離了代碼我的應用程序組織如下：

app
app.component.html
app.module.ts
app-routing.module.ts
----authentication
-------Login,forgotpass, register at the same level but different directories
    authentication-routing.module.ts
    authentication-module.ts
Layout
-----header,footer,sidebar register at the same level different directories
layout-routing.module.ts
layout.module
home
-----home.component, home.module, home.component.ts
mypaymentreq
----Newrequest
    -----Newrequest.component.html,newrequest.component.ts at same level
mypaymentreq-routing.module.ts

mypaymentreq-module.ts

newrequest.component.ts 看起來像：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { User} from '../../_models';
import { AlertService, UserService, AuthenticationService } from '../../_services';
@Component({
    selector: 'app-newrequest',
    templateUrl: './newrequest.component.html',
    styleUrls: ['./newrequest.component.css']
})
export class NewrequestComponent implements OnInit {
currentUser: User;
mypaymentrequestForm: FormGroup;
loading = false;
submitted = false;

constructor(
    private formBuilder: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private authenticationService: AuthenticationService,
    private userService: UserService,
    private alertService: AlertService
    ) {
       this.currentUser = this.authenticationService.currentUserValue;
   }

ngOnInit() {
    this.mypaymentrequestForm = this.formBuilder.group({
        employeeName: [''],
        dateRequest: [''],
        ...(many more values will go here once I sort out isse)
     })
}


onSubmit() {
    this.submitted = true;
    ......
    }
   }

newrequest.component.html 代碼如下所示：

<body>
    <div id="wrapper">
        <SidebarComponent></SidebarComponent>
           <div id="page-wrapper" class="gray-bg">
              <HeaderComponent></HeaderComponent>
                <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-sm-4">
                    <h2>Payment Request </h2>
                        <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="/home">Home</a>
                         </li>
                        <li class="breadcrumb-item active">
                            <strong>Payment Request</strong>
                        </li>
                    </ol>
                </div>
            </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="col-lg-12">
                <div class="ibox-content m-b-sm border-bottom">
                    <div class="p-xs">
                        <div class="float-left m-r-md">
                            <i class="fa fa-home text-navy mid-icon"></i>
                        </div>
                        <h2><font color="#4eccb9"  class="font-weight-bold"></font></h2>
                        <span></span>
                    </div>
                </div>
                <div class="ibox-content forum">
                    <div class="col-lg-12">
                        <div class="ibox-title">
                            <h5></h5>

                        </div>
                        <div class="ibox-content">
                            <form class="container" [formGroup]="mypaymentrequestForm"   (ngSubmit)="onSubmit()">
                                <label class="col-sm-10 col-form-label">*Employee Making Request</label>
                                <input id="employeeName" formControlName="employeeName" type="text" placeholder="" class="form-control" required>
                                <label class="col-sm-10 col-form-label">Date of Request</label>
                                <input id="theDate" formControlName="dateRequest" type="text" class="form-control" >
                                <button class="btn btn-primary btn-sm">Submit</button>  
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <FooterComponent></FooterComponent>
    </div>
</div>

請注意 currentUser.firstname 和 currentUser.lastname 的值顯示正確。

mypaymentreq-routing.module.ts 看起來像：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewrequestComponent } from './newrequest/newrequest.component';
import { ModuleWithProviders } from '@angular/core';
export const routes: Routes = [
  { 
    path: '', component: NewrequestComponent,  canActivate: [AuthGuard],   
  },
{ 
   path: 'newrequest', component: NewrequestComponent,  canActivate: [AuthGuard],   
},]
export const routing: ModuleWithProviders = RouterModule.forChild(routes)

mypaymentreq.module.ts 看起來像：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NewrequestComponent } from './newrequest/newrequest.component';
import { routes } from './mypaymentreq-routing.module';
import { RouterModule } from '@angular/router';
import { LayoutModule } from '../layout/layout.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HomeModule } from '../home/home.module';


@NgModule({
  declarations: [NewrequestComponent],
  imports: [
  CommonModule,
  RouterModule.forChild(routes),
  LayoutModule,
  HomeModule,
  ReactiveFormsModule,
  FormsModule
],

})
export class MypaymentreqModule { }
--------------------------------------

app.module.ts 看起來像：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthenticationModule } from './authentication/authentication.module'
import { ReactiveFormsModule, FormsModule} from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { routing } from './app-routing.module';
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { AppComponent } from './app.component';
import { HomeModule } from './home/home.module';
import { AlertModule } from './_components/alert.module';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { MypaymentreqModule } from './mypaymentreq/mypaymentreq.module'


@NgModule({
    imports: [
       BrowserModule,
       routing,
       ReactiveFormsModule,
       FormsModule,
      HttpClientModule,
      HomeModule,
      AuthenticationModule,
     RouterModule,
     AlertModule,
     MypaymentreqModule
  ],
declarations: [
    AppComponent,
],
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },


],
schemas : [NO_ERRORS_SCHEMA],

bootstrap: [AppComponent]
})

導出類 AppModule { }; -------------------

the app-routing.module.ts looks like
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home';
import { AuthGuard } from './authentication';
import { ModuleWithProviders } from '@angular/core'

export const routes: Routes = [
{
  path: '',
  redirectTo: 'login',
  pathMatch: 'full'
},
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', loadChildren: './authentication/authentication.module#AuthenticationModule', },
{ path: 'register', loadChildren: './authentication/authentication.module#AuthenticationModule', },
{ path: 'forgotpass', loadChildren: './authentication/authentication.module#AuthenticationModule', 
},
{ path: 'newrequest', loadChildren: './mypaymentreq/mypaymentreq.module#MypaymentreqModule', },


// otherwise redirect to home
{ path: '**', redirectTo: 'login' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes)

 --------------------------------------

完整的錯誤是：

ERROR Error: formControlName must be used with a parent formGroup directive.  
 You'll want to add a formGroup
   directive and pass it an existing FormGroup instance (you can create one in your class).

  Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});
at Function.controlParentException (forms.js:2237)
at FormControlName._checkParentType (forms.js:8061)
at FormControlName._setUpControl (forms.js:8069)
at FormControlName.ngOnChanges (forms.js:7993)
at checkAndUpdateDirectiveInline (core.js:31906)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)

在 Object.eval [作為 updateDirectives]

這是我第一次在這個論壇上提問，如果我遺漏了一些非常愚蠢的東西，請善待你的回答...:-) 但是經過 2 天以上的嘗試，其他人的觀點可能是最好的對我來說。

Answer 1

初始化您的控件。

this.mypaymentrequestForm = this.formBuilder.group({
        employeeName: this.formBuilder.control(''),
        dateRequest: this.formBuilder.control(''),
        ...(many more values will go here once I sort out isse)
     })

Answer 2

發現問題，由於 html 代碼是我正在升級的遺留代碼，我沒有注意到在 htlm 頁面的頂部出現了以下內容 meta formControlName="viewport" content="width=device-width, initial- scale=1.0" 我不確定該代碼是如何到達那里的，但是一旦我修復了該行以讀取：meta name="viewport" content="width=device-width, initial-scale=1.0" 整個工作正常，謝謝為了幫助

錯誤 formControlName 必須與父 formGroup 指令一起使用。您需要添加一個 formGroup

問題描述

mypaymentreq-module.ts

在 Object.eval [作為 updateDirectives]

2 個解決方案

解決方案1
0 2019-12-14 14:01:31

解決方案2
0 2019-12-15 16:55:19

錯誤 formControlName 必須與父 formGroup 指令一起使用。 您需要添加一個 formGroup

問題描述

mypaymentreq-module.ts

在 Object.eval [作為 updateDirectives]

2 個解決方案

解決方案1 0 2019-12-14 14:01:31

解決方案2 0 2019-12-15 16:55:19

錯誤 formControlName 必須與父 formGroup 指令一起使用。您需要添加一個 formGroup

解決方案1
0 2019-12-14 14:01:31

解決方案2
0 2019-12-15 16:55:19