Skip to content

Instantly share code, notes, and snippets.

@jjvillavicencio
Created May 14, 2018 21:08
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 jjvillavicencio/3c498fedba9be1a46958851906062613 to your computer and use it in GitHub Desktop.
Save jjvillavicencio/3c498fedba9be1a46958851906062613 to your computer and use it in GitHub Desktop.
Crear formularios Angular 4
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { FileHolder } from 'angular2-image-upload';
@Component({
selector: 'app-add-conductor',
templateUrl: './add-conductor.component.html',
styleUrls: ['./add-conductor.component.css']
})
export class AddConductorComponent implements OnInit {
// >>>>>Variable para el formulario
miFormulario: FormGroup;
constructor() { }
ngOnInit() {
// >>>>>Vinculación con html
this.miFormulario = new FormGroup({
nombre: new FormControl('',),
correo: new FormControl(''),
password: new FormControl(''),
imagen: new FormControl('')
});
}
// >>>> Función para enviar datos
enviar(){
console.log('REspuestas form:', this.miFormulario.value);
}
onUploadFinished(file: FileHolder) {
this.miFormulario.controls.imagen.setValue(file);
}
}
<form [formGroup]="miFormulario">
<div class="form-group">
<label for="ingresoEmail">Email address</label>
<input formControlName="correo" type="email" class="form-control" id="ingresoEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Nombre</label>
<input formControlName="nombre" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ingresar nombre">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input formControlName="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" (click)="enviar()" class="btn btn-primary">Submit</button>
<image-upload (uploadFinished)="onUploadFinished($event)"></image-upload>
</form>
<!---Presentar en pantall-->
<pre>
{{miFormulario.value | json}}
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment