javascript - Angular 尝试重置表单

Question

我正在尝试使用 Angular 4 创建一个应用程序。 尝试在我的 html 表单上实现重置功能。<​​/p>

在我的 app.component.html 文件中，我给出了类似的表单标记。

<form #myForm="ngForm" (ngSubmit)="onSubmit()">

<tr>
<th>LEVEL Name 1<br>level 1<br> <button (click)="myForm.reset();">clear</button> &nbsp; <a href="">Delete</a></th>
<th>IN Network</th></tr>

在我的 app.component.ts 文件中，我的 onSubmit 函数代码是:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
 export class AppComponent {
 title = 'app';

 onSubmit() {
    console.log("Form Cleared!");
  }
} 

现在它没有反射(reflect)代码中的任何错误，但是当我通过执行 ngserve 在 cmd 上运行我的项目时，在我的浏览器 localhost://4200 中没有任何错误显示。当我按 F12 时。它给了我以下错误:

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("<!--The content       below is only a placeholder and can be replaced.-->

<form [ERROR ->]#myForm="ngForm" (ngSubmit)="onSubmit()">

<h1>Provider Network Setup</h1>
"): ng:///AppModule/AppComponent.html@2:6
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part      of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

      [ERROR ->]<router-outlet></router-outlet>
</form>"): ng:///AppModule/AppComponent.html@91:0
    at syntaxError (webpack-      internal:///../../../compiler/esm5/compiler.js:706)
at TemplateParser.parse (webpack-internal:///../../../compiler/esm5/compiler.js:24882)
at JitCompiler._parseTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:34835)
at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:34810)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:34711)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:34711)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:34581)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:695)
at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:34580)

有人可以在这里指导吗？ TIA

Answer 1

您可以执行以下操作:

<form #myForm name="myForm" (ngSubmit)="onSubmit()">
<tr>
<th>LEVEL Name 1<br>level 1<br> <button (click)="onSubmit()">clear</button> &nbsp; <a href="">Delete</a></th>
<th>IN Network</th></tr>
</form>

在 onSubmit 中我们可以说:

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
 export class AppComponent {
 title = 'app';
 @ViewChild('myForm') myForm: ElementRef;

  onSubmit() {
        this.myForm.reset();
    }

} 

还要确保导入表单模块。