javascript - Angular 提交处理程序不将数据记录到控制台

Question

我创建了以下 Angular 分量:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'weather-search',
    template: `
        <section>
            <form (ngSubmit)="onSubmit(f)" let f="ngForm" class="search__form">
                <label for="search_city">Enter City</label>
                <input ngControl="location" type="text" id="search_city"  placeholder="Enter City" required/>
                <button type="submit">Add City</button>
            </form>
            <div class="locationsearch__info">
                <span class="info">City Found</span>:<span>Kansas</span>
            </div>
        </section>
    `,
    styleUrls: ['./weather-search.component.css']
}) 


export class WeatherSearchComponent {
    onSubmit(form: FormGroup) {
        console.log(form);
    }
}

我在我的 app.component.ts 中使用这个组件，如下所示:

@Component({
  selector: 'app-root',
  template: `
  <weather-search></weather-search>
  <weather-list></weather-list>
  `,
  styleUrls: ['app.component.css']
})

现在的问题是，当我点击提交时，我希望提交将被停止，并且表单数据将被 console.log 编辑，这不是现在发生的事情，只是为了给出一个我的代码的简要预览，请注意我如何有一个局部变量 let f="ngForm" 并在提交时将此变量传递给提交处理程序，如下所示 (ngSubmit)="onSubmit( f)”。

到目前为止，虽然在提交时我在控制台中看不到任何内容。为什么我的提交处理程序不起作用？

Answer 1

您必须使用 # 符号来定义局部变量，如下所示:

<form (ngSubmit)="onSubmit(f)" #f="ngForm" class="search__form">