javascript - 提交按钮不起作用/没有反应

Question

我是 Angular 2 和 Typescript 的新手，但我正在尝试构建一个 Web 应用程序。我构建了一些输入字段，并希望在通过按钮提交它们后将它们记录到控制台。但我的按钮实际上不起作用或没有反应。

有人知道我的代码有什么问题吗？

这是我的代码:

app.component.html

  <div class="panel panel-primary">
  <div class="panel-heading">Status</div>
  <div class="panel-body">
    <h3>{{title}}</h3>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>
      <div class="form-group">
        <label>Street</label>
        <input type="text" class="form-control" name="street" ngModel>
      </div>
      <div class="form-group">
        <label>PLZ</label>
        <input type="text" class="form-control" name="plz" ngModel>
      </div>
    </form>  
      <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

app.component.ts

import { Component, style } from '@angular/core';
import { TutorialsComponent } from './tutorial.component';
import { SteliosComponent } from './stelios.component';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {
  public title ="Das ist die erste Componente"
  public childData: string; 
  onSubmit(value: any){
    console.log(value);
  }
}

Answer 1

您的按钮不在您的表单中。将其放入您的表格中即可开始!