0

component.html

<div class="auth-wrapper">
<form class="form-signin"   [formGroup]="signupForm" (ngSubmit)="registerUser()" >
    <h3 class="h3 mb-3 font-weight-normal text-center">Please sign up</h3>
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" formControlName="name" placeholder="Enter name" required>
    </div>
    <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" formControlName="email" placeholder="Enter email" required>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" formControlName="password" placeholder="Password" required>
    </div>
    <button type="submit" class="btn btn-block btn-primary">Sign up</button>
</form>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
import { AuthService } from './../../shared/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})

export class SignupComponent implements OnInit {
  signupForm: FormGroup;

  constructor(
    public fb: FormBuilder,
    public authService: AuthService,
    public router: Router
  ) {
    this.signupForm = this.fb.group({
      name: [''],
      email: [''],
      mobile: [''],
      password: ['']
    })
  }

  ngOnInit() { }

  registerUser() {
    this.authService.signUp(this.signupForm.value).subscribe((res) => {
      if (res.result) {
        this.signupForm.reset()
        this.router.navigate(['log-in']);
      }
    })
  }
}

En component.html, si cambio el ngSubmit por onsubmit y le pongo por ejemplo un alert('hola'), funciona, en cambio si pongo el alert con el ngSubmit, no hace nada, por lo tanto tampoco está haciendo el registerUser, he puesto alert en la función registerUser y tampoco lo hace, no está haciendo la función en absoluto

1 respuesta 1

0

//prueba de la siguiente manera

 <div class="auth-wrapper">
   <form class="form-signin" #e="ngForm" (ngSubmit)="registerUser(e)" >
<h3 class="h3 mb-3 font-weight-normal text-center">Please sign up</h3>
<div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" formControlName="name" placeholder="Enter name" required>
</div>
<div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" formControlName="email" placeholder="Enter email" required>
</div>
<div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" formControlName="password" placeholder="Password" required>
</div>
<button type="submit" class="btn btn-block btn-primary">Sign up</button>

5
  • ahora me da este error: core.js:3864 ERROR Error: Uncaught (in promise): Error: Export of name 'ngForm' not found! Error: Export of name 'ngForm' not found!
    – Sebas
    Commented el 20 abr. 2020 a las 17:13
  • debes trael elmodulo del core de angular en tu metodo registerUser(){} registerUser(e: NgForm){} import { NgForm } from '@angular/forms';
    – Enzo
    Commented el 20 abr. 2020 a las 17:22
  • esta usando reactive forms no template forms
    – hawks
    Commented el 20 abr. 2020 a las 17:24
  • claro, estoy usando reactive forms amigo
    – Sebas
    Commented el 20 abr. 2020 a las 17:26
  • no le había prestado atención al subscribe perdón, de esta menera retiro lo dicho ya que descubrí Rxjs hace no mas de 3 días y no tengo conocimiento para aportar, espero que encuentres solución, disculpa
    – Enzo
    Commented el 20 abr. 2020 a las 17:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.