Угловая форма не определена

Я пытаюсь поставить проверку формы, но получаю, что элемент формы не определен. Если я удаляю элемент app-root из index.html, он начинает работать в соответствии с ожиданиями.

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>NKZ Technologies</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="script" src="../node_modules/angular/angular.min.js"> 
    </script>
    </head>
    <body>
        <form name="myForm">
          Valid = {{myForm.$valid}}
        ̶<̶/̶f̶o̶r̶m̶>̶
         <app-root></app-root>
        </form>
    </body>
</html>

Спасибо анкит

@georgeawg ваше предложение работает на меня, но только в index.html,

Сейчас app-root элемент рендеринга app.component, У меня такая же форма undefine проблема в app.component.html.

<div id="main-content">
  <form name="test">
      a = {{test.$valid}} 
  </form> 
</div>
Источник

2 ответа

Включить <app-root> компонент в <form> элемент:

<body>
  <form name="myForm">
    Valid = {{myForm.$valid}}
  ̶<̶/̶f̶o̶r̶m̶>̶
    <app-root></app-root>
  </form>
</body>

Элементы ввода внутри <app-root> Компонент может зарегистрироваться в контроллере формы, только если он включает эти элементы.

Также не забудьте импортировать FormsModule:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [
    CoreModule,
    FormsModule
  ],
})
export class AppModule {}
Источник

Решено. Ниже уловка для меня.

<form (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>

Спасибо,

Источник
Другие вопросы по тегам