Estoy usando angular5, la forma se ve así:

<div class="box-body">
    <form novalidate #formRef="ngForm">
        <div class="row">
            <div class="col-sm-6 form-group">
                <label>First name</label>
                <input type="text" class="form-control" name="firstName" ngModel #firstNameRef="ngModel">
            </div>
            <div class="col-sm-6 form-group">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastName" ngModel #lastNameRef="ngModel">
            </div> 
        </div>
        <button type="submit" class="btn btn-secondary" (ngSubmit)="onSubmit(formRef.value)">Submit</button>
    </form>
</div>

La clase se ve así:

import { Component } from '@angular/core';

interface User {
  firstName: string;
  lastName: string;
}

@Component({
  selector: "registration-form",
  templateUrl: "./registration-form.component.html"
})

export class RegistrationFormComponent {
  onSubmit(formValue) {
    alert('hi')
    console.log(formValue);
  }
}

Pero cuando completo los datos en la entrada, y no envío nada a las consolas. también la alerta no se llamó en absoluto. ¿Falta algo aquí? que alguien me ayude

Demostración en vivo

1
3gwebtrain 15 feb. 2018 a las 10:22

2 respuestas

La mejor respuesta

Debe especificar el evento (ngSubmit) en la etiqueta <form> de esta manera (no en el botón):

<div class="box-body">
    <form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
        <div class="row">
            <div class="col-sm-6 form-group">
                <label>First name</label>
                <input type="text" class="form-control" name="firstName" ngModel #firstNameRef="ngModel">
            </div>
            <div class="col-sm-6 form-group">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastName" ngModel #lastNameRef="ngModel">
            </div> 
        </div>
        <button type="submit" class="btn btn-secondary">Submit</button>
    </form>
</div>
2
Juan 15 feb. 2018 a las 07:36

Esto funciona para mi:

<div class="box-body" >
    <form novalidate #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
        <div class="row">
            <div class="col-sm-6 form-group">
                <label>First name</label>
                <input type="text" class="form-control" name="firstName" ngModel #firstNameRef="ngModel">
            </div>
            <div class="col-sm-6 form-group">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastName" ngModel #lastNameRef="ngModel">
            </div> 
        </div>
        <button type="submit" class="btn btn-secondary">Submit</button>
    </form>
</div>
0
3gwebtrain 15 feb. 2018 a las 07:35