Categorias
iiiiii
Manejo de Formulario ionic
Descripcion
se describe como se reciben datos de un formulario
Nota
<ion-content>
<!--
#form : con esto se enlaza el #nombre como un formulario enlazandolo con ngForm de Angula y poder usar todas sus propiedades
ngSubmit : se dispara cuando se envia el formulario, y como parametro se envia el nombre del formulario #nombreformulario
[(ngModel)] : se debe enlazar un objeto json con la estructura para cada elemento del formulario
nombre: es el nombre del input y sera inyectada en el objeto (para este ejemplo form)
required : con esto le decimos el item si eso bligatorio o no
pattern : de esta forma pasamos una expresion regular que valide si el dato cumple
-->
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<ion-list>
<ion-header>
<ion-toolbar>
<ion-title>Formul {{form.valid}}</ion-title>
</ion-toolbar>
</ion-header>
</ion-list>
<ion-item>
<ion-label>Correo</ion-label>
<ion-input
autocapitalize="on"
type="email"
name="email"
placeholder="Escriba usuario"
required=true
[(ngModel)]="usuario.email"
pattern="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$"
></ion-input>
<!--<ion-note slot="helper">Enter a valid email</ion-note>-->
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input
name="password"
type="password"
placeholder="Escriba usuario"
required=true
[(ngModel)]="usuario.password"
pattern="^([a-zA-Z0-9_\-\.]*)$"
></ion-input>
</ion-item>
<ion-button
[disabled]="form.invalid"
class="ion-padding" expand="block" type="ngSubmit">
Enviar
</ion-button>
</form>
html
import { NgFor } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-imputs',
templateUrl: './imputs.page.html',
styleUrls: ['./imputs.page.scss'],
})
export class ImputsPage implements OnInit {
usuario ={
email:'',
password:''
}
constructor() { }
ngOnInit() {
}
onSubmit(formulario:NgForm){
console.log(formulario);
}
}