Question

我尝试导入FormsModule和NgForm模块，以及将FormsModule添加到imports数组中。

以下是我的代码：

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, NgForm} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <form #searchForm="ngForm">
  <input type="text" required [(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm">
  <p class="error" [hidden]="inputSearch.valid"> This input is required</p>


  </form>

  `,
  styles: [`
  .error {
    color: red;
    font-size: 11px;
  }
  `]
})
export class App {
  public model = {
    search: "" 
  }

  constructor() {

  }
}

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

以下是打印输出错误：

runtime.9ff156e16d788666a54a.js：16错误：模板解析错误：   ＆＃34; exportAs＆＃34;没有指令设置为＆＃34; ngForm＆＃34; （＆＃34;]＃searchForm =＆＃34; ngForm＆＃34;＆gt;] #inputSearch =＆＃34; ngForm＆＃34;＆gt;此输入为必要
＆＃34;）：   ng：///AppModule/App.html@2：76无法绑定到＆＃39; ngModel＆＃39;因为它不是一个   已知属性的输入＆＃39;。（＆＃34;] [（ngModel）] =＆＃34; model.search＆＃34;   ngControl =＆＃34;搜索＆＃34; #inputSearch =＆＃34; ngForm＆＃34;＆GT; https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js正在加载   https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js f @   runtime.9ff156e16d788666a54a.js：16

Answer 1

错误是由这一行引起的：

#inputSearch="ngForm"

这是正确的行：

#inputSearch="ngModel"

这是工作示例。当您在表单标记中使用ngModel时，您还需要为＆＃34; name＆＃34;提供值。属性。

  <form #searchForm="ngForm">
  <input type="text" required name="search" [(ngModel)]="model.search"  #inputSearch="ngModel">
  <p class="error" [hidden]="inputSearch.valid"> This input is required</p>
  </form>

Angular：错误没有指令＆＃34; exportAs＆＃34;设置为＆＃34; ngForm＆＃34;

1 个答案: