Question

我正在尝试进行表单验证，但是表单元素未定义。如果我从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>

谢谢，安奇

@georgeawg，您的建议对我有效，但仅适用于index.html。

现在app-root元素将渲染app.component。我在app.component.html中遇到undefine表格的问题。

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

Answer 1

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

Answer 2

已解决。下面的招数让我感到担忧。

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

谢谢

角形未定义

2 个答案: