Компонент формы Angular 5, вызывающий ошибку: «RangeError: Превышен максимальный размер стека вызовов» - PullRequest
Новая
       0

Компонент формы Angular 5, вызывающий ошибку: «RangeError: Превышен максимальный размер стека вызовов»

0 голосов
/ 10 мая 2018

Вот мой файл form.ts: 

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([])
  })
 }
}

}

Файл шаблона выглядит следующим образом: 

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

Файл AppModule выглядит следующим образом: 

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

Маршрутизация работает нормально, когда у меня нет компонента, на самом деле, кажется, он работает со всем, кроме компонента формы. Ошибка, которую я получаю, выглядит следующим образом:

core.js: 1601 ОШИБКА Ошибка: Uncaught (в обещании): RangeError: Превышен максимальный размер стека вызовов RangeError: превышен максимальный размер стека вызовов в 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) в новой FormGroup (forms.js: 3348) по адресу FormBuilder.push ../ node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js: 6009) в новом FormComponent (form.component.ts: 12) в createClass (core.js: 10156) в createDirectiveInstance (core.js: 10041) в createViewNodes (core.js: 11263) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в 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) в новой FormGroup (forms.js: 3348) по адресу FormBuilder.push ../ node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js: 6009) в новом FormComponent (form.component.ts: 12) в createClass (core.js: 10156) в createDirectiveInstance (core.js: 10041) в createViewNodes (core.js: 11263) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) at resolPromise (zone.js: 814) at resolPromise (zone.js: 771) at zone.js: 873 в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) в Object.onInvokeTask (core.js: 4062) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 420) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 188) на канале MicroTaskQueue (zone.js: 595) в ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [как вызов] (zone.js: 500) at invokeTask (zone.js: 1540)

Когда я добавляю к элементу <form> директиву novalidate (поскольку ошибка, похоже, связана с этим), я получаю другую ошибку:

Ошибка: ошибка (в обещании): RangeError: превышен максимальный размер стека вызовов RangeError: превышен максимальный размер стека вызовов в createViewNodes (core.js: 11228) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в createViewNodes (core.js: 11291) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в createViewNodes (core.js: 11291) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в createViewNodes (core.js: 11291) в createViewNodes (core.js: 11228) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в createViewNodes (core.js: 11291) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в createViewNodes (core.js: 11291) в callViewAction (core.js: 11579) в execComponentViewsAction (core.js: 11498) в createViewNodes (core.js: 11291) at resolPromise (zone.js: 814)в resolPromise (zone.js: 771) в zone.js: 873 в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) в Object.onInvokeTask (ядро.js: 4062) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 420) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 188) на канале MicroTaskQueue (zone.js: 595) в ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [как активировать] (зона.js: 500) в 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 (анонимный) @ 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 dumpMicroTaskQueue @ zone.js: 602 push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask @ zone.js: 500 invokeTask @ zone.js: 1540 globalZoneAwareCallback @ zone.js: 1566

Я прочитал все связанные с этим сообщения и не смог найти решения, по-видимому, этоочень простая форма, это точный код нескольких учебных пособий, у меня нет глубокого понимания форм, но я действительно не понимаю, почему это не работает.

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Это из-за вашего компонента form.ts, какой шаблон использует тег HTML5.Поскольку селектор был тегом HTML, он находился в бесконечной рекурсии.

Попробуйте изменить селектор с «формы» на «пользовательскую форму», и он будет работать наверняка.

0 голосов
/ 10 мая 2018

Это из-за селектора form. Измените его на app-form.

Вы используете встроенный тег form внутри собственного компонента form. Это приведет к рекурсии.

Ваш пользовательский селектор переопределил встроенный селектор form.

0 голосов
/ 10 мая 2018

Компонент Root используется для начальной загрузки приложения. Это не должно быть в массиве declarations.

Удалите его из массива объявлений: 

declarations: [
  Root,  ---->  remove this
  FormComponent,
  Home
],
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...