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

标签 javascript angular typescript button

我是 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);
  }
}

最佳答案

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

关于javascript - 提交按钮不起作用/没有反应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47416141/

相关文章:

javascript - 如何在 Web 浏览器中捕获 "JavaScript SetCookie event"?

angular - 除了异步管道之外,还有另一种自动订阅/取消订阅可观察对象的方法吗?

angular - 无法绑定(bind)到指令 ('appHasAccess' ),因为它不是 'input' 的已知属性

reactjs - 我无法在 typescript 中使用动态键名设置状态

javascript - 为什么 JQuery AJAX 调用在 IE7 中不起作用? (对于这个具体的例子)

javascript - href可以是ID吗?

javascript - Selenium IDE - 选择OkOnNextConfirmation 而不使用assertConfirmation?

javascript - 将 angular2 应用程序从本地 NodeJS 转换为网站

TypeScript - 从通用联合类型缩小类型

javascript - 在 Typescript 中使用默认值解构属性