Skip to content

Instantly share code, notes, and snippets.

@alphanetEX

alphanetEX/contacto.component.html

Created July 5, 2017 21:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alphanetEX/c0ffff2b40e7c5ca2d0be457f296389a to your computer and use it in GitHub Desktop.
Save alphanetEX/c0ffff2b40e7c5ca2d0be457f296389a to your computer and use it in GitHub Desktop.
Download ZIP
Formulario Rractivo Angular 2
Raw
contacto.component.html
<div class="texto-encabezado text-xs-center">
<div class="container">
<h1 class="display-4 wow bounceIn">{{title}}</h1>
<p class="wow bounceIn" data-wow-delay=".3s">{{subtitle}}</p>
</div>
</div>
<div class="col-md-8">
<div class="card " [@carduserprofile]>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2 class="m-b-2">contacto</h2>
<form id="form_contacto" [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group row">
<label for="nombre" class="col-md-2 col-form-label">Nombre</label>
<div class="col-md-7">
<input class="form-control" type="text" id="nombre" name="nombre" placeholder="{{name}}" data-toggle="tooltip" data-placement="top" formControlName="nombre">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-2 col-form-label">Email</label>
<div class="col-md-7">
<input class="form-control" type="text" id="email" name="email" placeholder="{{email}}" data-toggle="tooltip" data-placement="top" formControlName="email" >
</div>
</div>
<div class="form-group row">
<label for="mensaje" class="col-md-2 col-form-label">Mensaje</label>
<div class="col-md-7">
<textarea class="form-control" rows="5" id="mensaje" name="mensaje" placeholder="{{message}}" data-toggle="tooltip" data-placement="top" title="Ingrese un mensaje" formControlName="mensaje" ></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary" >Enviar</button>
<button type="reset" class="btn btn-secondary">Limpiar</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-user" [@cardprofile]>
<div class="image">
</div>
<div class="content">
<div class="author">
<a href="#">
<h4 class="title">XAS Dynamics<br/>
<small>Autonomous Systems</small>
</h4>
</a>
</div>
<p class="description text-center"> Telephone: 22446611 <br>
Email: xasfaltinet@xa.com <br>
Ubication:N.º 179, Calle La Reforma, San Salvador
</p>
</div>
<hr>
<div class="text-center">
<button href="https://www.facebook.com/ArtCodeStudios/" class="btn btn-facebook"><i class="fa fa-facebook-square"></i></button>
<button href="" class="btn btn-simple"><i class="fa fa-twitter"></i></button>
<button href="" class="btn btn-simple"><i class="fa fa-google-plus-square"></i></button>
</div>
</div>
</div>
Raw
contacto.component.ts
import { Component, OnInit,AfterViewInit,trigger,state,style,transition,animate,keyframes} from '@angular/core';
import { Router, ActivatedRoute, Params} from '@angular/router';
import { TiendaService} from '../../services/tienda.service';
import { Contacto } from "../../model/contacto";
import { SweetAlertService } from 'ng2-sweetalert2';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'contacto-cmp',
templateUrl: 'contacto.component.html',
providers: [TiendaService],
animations: [
trigger('cardprofile', [
state('*', style({
'-ms-transform': 'translate3D(0px, 0px, 0px)',
'-webkit-transform': 'translate3D(0px, 0px, 0px)',
'-moz-transform': 'translate3D(0px, 0px, 0px)',
'-o-transform':'translate3D(0px, 0px, 0px)',
transform:'translate3D(0px, 0px, 0px)',
opacity: 1})),
transition('void => *', [
style({opacity: 0,
'-ms-transform': 'translate3D(0px, 150px, 0px)',
'-webkit-transform': 'translate3D(0px, 150px, 0px)',
'-moz-transform': 'translate3D(0px, 150px, 0px)',
'-o-transform':'translate3D(0px, 150px, 0px)',
transform:'translate3D(0px, 150px, 0px)',
}),
animate('0.3s 0.25s ease-out')
])
]),
trigger('carduserprofile', [
state('*', style({
'-ms-transform': 'translate3D(0px, 0px, 0px)',
'-webkit-transform': 'translate3D(0px, 0px, 0px)',
'-moz-transform': 'translate3D(0px, 0px, 0px)',
'-o-transform':'translate3D(0px, 0px, 0px)',
transform:'translate3D(0px, 0px, 0px)',
opacity: 1
})),
transition('void => *', [
style({opacity: 0,
'-ms-transform': 'translate3D(0px, 150px, 0px)',
'-webkit-transform': 'translate3D(0px, 150px, 0px)',
'-moz-transform': 'translate3D(0px, 150px, 0px)',
'-o-transform':'translate3D(0px, 150px, 0px)',
transform:'translate3D(0px, 150px, 0px)',
}),
animate('0.3s 0s ease-out'),
])
])
]
})
export class ContactoComponent implements OnInit{
public title = "Contacto";
public subtitle = "Estamos listos para ayudarte";
public colmd8title = "llena tus datos";
public contacto: Contacto;
public errorMessage: string;
public status: string;
public titulo = "crear contacto";
public name = "Ingrese su nombre";
public email = "Ingrese su email";
public message = "Ingrese su mensaje";
form: FormGroup;
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _tiendaService: TiendaService,
private fb: FormBuilder
){ this.crearControles();}
onSubmit(){
this._tiendaService.addContracto(this.form.value).subscribe(
response => {
this.status = response.status;
if(this.status !== "success"){
alert("Error en el servidor");
}
},
error => {
this.errorMessage = <any>error;
if(this.errorMessage !== null){
console.log(this.errorMessage);
alert("Error en la petición");
}
}
);
}
ngOnInit(){
this.contacto = new Contacto(0,"","","");
}
crearControles(){
this.form = this.fb.group({
nombre:'',
email:'',
mensaje:''
})
}
}
Raw
tienda.service.ts
import {Injectable} from "@angular/core";
import { Http, Response, Headers } from '@angular/http';
import "rxjs/add/operator/map";
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';
import {Tienda} from '../model/tienda';
import {Contacto} from '../model/contacto';
@Injectable()
export class TiendaService{
constructor(private _http: Http){}
// Shopping information Store
getTiendas(){
return this._http.get("http://localhost/slim/tienda-linea.php/producto")
.map(res => res.json());
}
// Contact area information
getContactos(){
return this._http.get("http://localhost/slim/tienda-linea.php/contacto")
.map(res => res.json());
}
addContracto(contacto: Contacto) {
let json = JSON.stringify(contacto);
let params = "json="+json;
let headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
return this._http.post("http://localhost/slim/tienda-linea.php/add-contacto",
params, {headers: headers})
.map(res => res.json())
.catch(this.handleError);
}
protected handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment