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

您的按钮不在您的表单中。把它放在你的表格中，你就好了！

Answer 2

您必须将提交按钮与表单相关联。

通常将<button>元素置于 <form>元素内来完成。

您可以将其移至</form>之前。

或者，您可以使用form属性：

<button form="id_of_form_element_goes_here" type="submit" class="btn btn-primary">Submit</button>

...但浏览器对此的支持较弱。

Answer 3

在表单中移动提交按钮。

<form>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

提交按钮不起作用/反应

3 个答案: