角度形式未定义答案

【问题标题】：Angular form undefined角度形式未定义
【发布时间】：2018-12-03 09:15:30
【问题描述】：

我正在尝试进行表单验证，但我发现表单元素未定义。如果我从 index.html 中删除 app-root 元素，它会按预期开始工作。

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

谢谢， Ankit

@georgeawg 你的建议对我有用，但仅限于index.html。

现在app-root 元素呈现app.component。我在 app.component.html 中有相同的表单 undefine 问题。

<div id="main-content">
  <form name="test">
      a = {{test.$valid}} 
  </form> 
</div>

【问题讨论】：

出现错误的代码示例？
@felixmosh。抱歉，我忘记添加代码了。现在我已经更新了。 myForm 无效。
正在使用AngularJS 或Angular (2>)？
@felixmosh。我正在使用角度 2。
该代码有一个ng-app 指令并加载angular/angular.js。如果您要问一个 angular2 问题，那就不酷了。 Angular 2 nested forms with child components and validation 的可能重复项。

标签： angular angular-forms

【解决方案1】：

已解决。下面的技巧对我来说很糟糕。

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

谢谢，

【讨论】：

【解决方案2】：

在<form> 元素中包含<app-root> 组件：

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

【讨论】：

我正在使用 Angular 2。您的建议对我有用，但仅在 index.html 中。现在 app-root 元素呈现 app.component。我在 app.component.html 中遇到了相同的未定义问题。

a = {{test.$valid}}
Angular 2 nested forms with child components and validation的可能重复