Angular 表单数据绑定不绑定数据

Question

我知道我正在做一些非常愚蠢的事情。我的 html 页面中有两种形式。一个用于发表评论，一个用于搜索。评论发布一个工作正常，但搜索一个没有正确绑定数据。它转到它的 clickHandler，但我无法获取要绑定的数据。

这里是HTML代码：

<div class="searchbar-container">
 <div class="row">
    <div class="col-12">
      <form class="form mb-3" (ngSubmit)="onSearchSubmit(searchForm)" #searchForm="ngForm">
        <div class="input-group">
          <input class="form-control" type="search" placeholder="Search" aria-label="Search" [(ngModel)]="searchString">
          <button class="btn btn-outline-dark" type="submit"  [disabled]="!searchForm.valid">Search</button>
        </div>
      </form>
    </div>
  </div>
</div>

这是组件。我只是发布点击处理程序方法。 searchString 是全班可用的字符串

searchString : any = "";

onSearchSubmit(form: NgForm) {
  console.log("came to Search onSubmit");
  console.log(this.searchString)
  
  
}

打印 searchString 打印一个空字符串。我做错了什么？

Answer 1

从

FormsModule

导入

@angular/forms

，设置属性为

string

（如果你使用的是typescript，不要使用

any

类型）

如果您在表单标签内使用 ngModel，请在输入标签上设置名称属性

NG01352

工作示例：

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <form (submit)="submit()">
      <input type="text" name="search" [(ngModel)]="searchString" />
      <br/>
      <p>Text: {{searchString}}</p>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class App {
  searchString: string = '';

  submit(): void {
    console.log(this.searchString);
  }
}

bootstrapApplication(App);

Stackblitz：https://stackblitz.com/edit/angular-pci4um?file=src%2Fmain.ts,src%2Findex.html