Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

ngSubmit não está funcionando

Quando faço o submit do form, o método transferir aparentemente não está sendo chamado, pois não é exibida a mensagem no console. Notei também que após dar o submit, a url fica com os valores dos inputs. Exemplo:

http://localhost:4200/?valor=123&destino=100

O que pode ser?

5 respostas

Olá Marcelo, tudo bem?

Pode ser erro nos importações ou algum erro de sintaxe.

Para eu conseguir te ajudar melhor, por favor, copie o código dos seus arquivos nova-transferencia.component.html e nova-transferencia.component.ts aqui e veremos qual o problema, ok?

Aguardo, até mais!

Olá Nayanne!

Seguem dos códigos:

nova-transferencia.component.html

<section class="container">
  <form class="formulario" (ngSubmit)="transferir()">
    <h2 class="formulario__titulo">Nova Transferência</h2>

    <div class="form-field">
      <label class="form-field__label" for="valor">Valor</label>
      <input class="form-field__input" id="valor" type="text" [(ngModel)]="valor" name="valor" />
    </div>

    <div class="form-field">
      <label class="form-field__label" for="destino">Destino</label>
      <input class="form-field__input" id="destino" type="text" [(ngModel)]="destino" name="destino" />
    </div>

    <div class="botao-wrapper">
      <button class="botao" type="submit">Transferir</button>
    </div>
  </form>
</section>

nova-transferencia.component.ts

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

@Component({
  selector: 'app-nova-transferencia',
  templateUrl: './nova-transferencia.component.html',
  styleUrls: ['./nova-transferencia.component.scss'],
})
export class NovaTransferenciaComponent {
  valor: number;
  destino: number;
  transferir() {
    console.log('Solicitada nova transferência');
    console.log('Valor: ', this.valor);
    console.log('Destino: ', this.destino);
  }
}

Att.,

Marcelo

solução!

Marcelo, verifique se você importou o FormsModule em app.module.ts (código abaixo):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NovaTransferenciaComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nayanne,

Agora consegui resolver. Aparentemente foi a importação do FormsModule que estava faltando. Na verdade ela estava lá, acho que por falha minha não havia salvado o arquivo.

Muito obrigado!

Que bom que resolveu Marcelo. Qualquer dúvida, fico à disposição.

Abraços e bons estudos! :)