Categorias
iiiiii
Fromularios
Descripcion
Como manejar loos formularios
Notas
<form action="" method="POST" role="form" (ngSubmit)="emitCaracter" >
<legend>Agregar personaje</legend>
<div class="form-group">
<label for="">Nombre</label>
<input
[(ngModel)]="caracter.name"
type="text"
name="name"
class="form-control"
placeholder="Nopmbre personale"
>
<label for="">Poder</label>
<input
type="text"
[(ngModel)]="caracter.power" <!--De esta forma se enlaza una propiedad de un objeto a un input de html-->
name="power"
class="form-control"
placeholder="Cantidad poder"
>
</div>
<button type="submit" class="btn btn-primary ">
Submit
</button>
</form>
app_module
import { Component } from '@angular/core';
import { Caracter } from '../../interfaces/caracter.interfaces';
@Component({
selector: 'dbz-add-character',
templateUrl: './add-character.component.html',
styleUrls: ['./add-character.component.css']
})
export class AddCharacterComponent {
//creamos una variable que va a enviar el formulario a otro modulo
@Output()
public onNewCarter:EventEmitter<Caracter> = new EventEmitter();
//Se crea un objeto de como va lucir los datos a guardar
public caracter:Caracter={
name:'',
power:0
}
emitCaracter(){ //metood que se ejecuta al enviar el formulario
console.log(this.caracter);
this.onNewCarter.emit(this.caracter); //enviamos el objeto caracter como variable de salida de este modulo
//limpiamos los datos
this.caracter.name='';
this.caracter.power=0;
}
}