javascript - Submit Button does not workreact - Stack Overflow

admin管理员组

文章数量:1316841

I am new to Angular 2 and Typescript but I am trying to build a web app. I build some input fields and I want to log them to the console after submitting them via a button. But my button does not really work or react.

Does anyone have an idea what is the problem with my code?

Here is my code:

appponent.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>

appponent.ts

import { Component, style } from '@angular/core';
import { TutorialsComponent } from './tutorialponent';
import { SteliosComponent } from './steliosponent';



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

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

I am new to Angular 2 and Typescript but I am trying to build a web app. I build some input fields and I want to log them to the console after submitting them via a button. But my button does not really work or react.

Does anyone have an idea what is the problem with my code?

Here is my code:

app.ponent.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.ponent.ts

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



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

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

• javascript
• angular
• typescript
• button

Share Improve this question Follow asked Nov 21, 2017 at 14:58 ste92ste92 43411 gold badge99 silver badges2424 bronze badges 1

• Your button is outside the form. Move it up one line inside the form. – Z. Bagley Commented Nov 21, 2017 at 15:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Your button isn't in your form. Put it in your form and you're good to go !

You have to associate the submit button with the form.

This is usually done by putting the <button> element inside the <form> element.

You could do that by moving it to just before </form>.

---

Alternatively, you could use the form attribute:

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

… but browser support for that is weaker.

Move the submit button inside the form.

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

本文标签： javascriptSubmit Button does not workreactStack Overflow