CODEWITHSUNDEEP
javascriptangulartypescriptbutton
ste92
ste92

Reputation: 434

Submit Button does not work / react

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.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);
  }
}

Upvotes: 0

Views: 10733

Answers (3)

Paka
Paka

Reputation: 1053

Move the submit button inside the form.

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

Upvotes: 1

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 1

user4676340
user4676340

Reputation:

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

Upvotes: 6

Related Questions