1

Here is my form.ts file:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from 
'@angular/forms';

 @Component({
 selector: 'form',
 templateUrl: './form.component.html',
 styleUrls: ['./form.component.scss']
 })
 export class FormComponent implements OnInit {
 formy;
 constructor(fb: FormBuilder) {
 this.formy = fb.group({
  name:['enter name here'],
  contact: fb.group({
    email:[],
    phone:[]
  }),
  topics: fb.array([])
  })
 }
}

}

The template file looks like this:

<div class="container">
  <form [formGroup]="formy">
    <input formControlName='name' />
      <div formGroupName='contact'>
        <input formControlName='email' type="text" />
        <input formControlName='phone' type="text" />
      </div>
    <ul>
      <li *ngFor='let topic of topics.controls'>
          {{topic.control}}
      </li>
   </ul>
   <button type='submit'>Submit</button>
  </form>
</div>
 <p>Works!</p>

The AppModule file looks like this:

import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { Root } from './app.component';
// import { RouterModule, Routes } from '@angular/router';
import { Routing } from './routing.module';
import { AngularMaterial } from './modules/angular-material.module';
// import { Forms } from './modules/forms.module';
import { FormComponent } from './form/form.component';
// import { RouterOutlet } from '@angular/router';
import { Home } from './home/home.component';
import {  ReactiveFormsModule }   from '@angular/forms';


@NgModule({
  declarations: [
    Root,
    FormComponent,
    Home
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularMaterial,
    // FormsModule,
    ReactiveFormsModule,
    // Forms,
    Routing
  ],
  providers: [],
  bootstrap: [Root]
})
export class AppModule { }

The routing works fine when I don't have the component, in fact it seems to work with everything except for the form component. The Error I am receiving looks like this:

core.js:1601 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._updateValue (forms.js:3764) at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2600) at new FormGroup (forms.js:3348) at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6009) at new FormComponent (form.component.ts:12) at createClass (core.js:10156) at createDirectiveInstance (core.js:10041) at createViewNodes (core.js:11263) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._updateValue (forms.js:3764) at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2600) at new FormGroup (forms.js:3348) at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6009) at new FormComponent (form.component.ts:12) at createClass (core.js:10156) at createDirectiveInstance (core.js:10041) at createViewNodes (core.js:11263) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540)

When I add to the <form> element the directive novalidate (since the error seemed to be related to that) I receive a different error:

ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at createViewNodes (core.js:11228) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at createViewNodes (core.js:11228) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540) defaultErrorLogger @ core.js:1601 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1650 next @ core.js:4736 schedulerFn @ core.js:3721 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3713 (anonymous) @ core.js:4093 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4030 onHandleError @ core.js:4093 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392 push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154 _loop_1 @ zone.js:677 api.microtaskDrainDone @ zone.js:686 drainMicroTaskQueue @ zone.js:602 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566

I read all related posts to this and could not find a solution to this, seemingly this is a very simple form, it is the exact code of a few tutorials, I don't have a deep understanding of forms but really don't get why this isn't working.

Improve this question

3 Answers 3

Reset to default
3

This is because of your component form.ts which template which uses the HTML5 tag. Since the selector was an HTML tag it was in infinite recursion.

Try to change the selector from "form" to "custom-form" and it will work for sure.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

It is because of the selector form. Change it to app-form.

You are utilizing the built in form tag inside your own form component. This will lead to recursion.

Your custom selector has overridden the built in form selector.

Improve this answer

Comments

0

The Root component is used to bootstrap the application. This should not be in declarations array.

Remove it from declarations array:

declarations: [
  Root,  ---->  remove this
  FormComponent,
  Home
],
Improve this answer

1 Comment

I get the following error when doing that : "Uncaught Error: Component Root is not part of any NgModule or the module has not been imported into your module."

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.