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

Я пытаюсь установить проверку формы, но получаю, что элемент формы не определен. Если я удалю корневой элемент приложения из 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>

angular angular-forms
person Ankit Rajpoot    schedule 24.06.2018    source источник
comment
пример кода с ошибкой?   -  person felixmosh    schedule 24.06.2018
comment
@felixmosh. Извините, я забыл добавить код. Сейчас я обновился. моя форма недействительна.   -  person Ankit Rajpoot    schedule 24.06.2018
comment
Вы используете AngularJS или Angular (2>)?   -  person felixmosh    schedule 24.06.2018
comment
@felixmosh. Я использую угловой 2.   -  person Ankit Rajpoot    schedule 25.06.2018
comment
Код имеет директиву ng-app и загружает angular/angular.js. НЕ круто, если вы задаете вопрос angular2. Возможный дубликат вложенных форм Angular 2 с дочерними компонентами и проверкой.   -  person georgeawg    schedule 25.06.2018

Ответы (2)


arrow_upward
0
arrow_downward

Включите компонент <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 {}
person georgeawg    schedule 24.06.2018
comment
Я использую angular 2. Ваше предложение работает для меня, но только в index.html. Теперь корневой элемент приложения отображает app.component. У меня такая же проблема с определением формы в app.component.html. ‹div id=main-content› ‹имя формы=тест› a = {{test.$valid}} ‹/form› ‹/div› - person Ankit Rajpoot; 25.06.2018
comment
Возможный дубликат вложенных форм Angular 2 с дочерними компонентами и проверкой - person georgeawg; 25.06.2018

arrow_upward
0
arrow_downward

Решено. Ниже трюк работает для меня.

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

Спасибо,

person Ankit Rajpoot    schedule 07.07.2018