通过NgForm无法获取内容

时间:2018-09-16 17:19:25

标签: angular forms typescript

我正在使用NgForm来获取表单数据。但是会显示以下错误,并且不会呈现任何内容。

  Error: Template parse errors:
    There is no directive with "exportAs" set to "NgForm" ("<div class="add-issue">
        <h1>Add an issue</h1>
        <form [ERROR ->]#issueForm="NgForm" (ngSubmit)="addIssue(issueForm)">
            <div class="form-group">
                <l"): ng:///AppModule/CreateissueComponent.html@2:10

issue.component.html:

<div class="add-issue">
    <h1>Add an issue</h1>
    <form #issueForm="NgForm" (ngSubmit)="addIssue(issueForm)">
        <div class="form-group">
            <label for="comment">Issue description:</label>
            <textarea class="form-control" rows="5" id="comment" name="description" ngModel #inputSearch="ngModel"></textarea>
          </div> 
      <div class="form-group">
          <label for="sev">Severity</label>
          <select class="form-control" id="sev" name="sev" ngModel #inputSearch="ngModel">
            <option>Low</option>
            <option>Medium</option>
            <option>High</option>
          </select>
        </div> 

        <button mat-stroked-button color="primary" type="submit">Submit</button>

    </form>
</div>

issue.component.ts:

addIssue(form: NgForm) {
    console.log(form.value);

  }

我已经在app.module.ts文件和spec文件中导入了FormsModule,ReactiveFormsModule,CommonModule。但是问题仍然存在

1 个答案:

答案 0 :(得分:1)

ngForm是公开的指令。不是NgForm

更改

<form #issueForm="NgForm" (ngSubmit)="addIssue(issueForm)">

<form #issueForm="ngForm" (ngSubmit)="addIssue(issueForm)">