COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

En angular 5 es muy bueno el trabajo que se tiene en formularios con FormGroup y FormControl
en la vista podemos tener:

			<form [formGroup]="datos" class="data-form" (ngSubmit)="funcionSubmit(datos.value)" novalidate>
				<label class="cform">¿Cuál es el valor total de sus ingresos mensuales?</label>
				<input id ="inputIngreso" type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode >= 0 && event.charCode <= 32" formControlName="totalIngresos"></form>

donde en el form tenemos una directiva FormGroup que será la encargada de manejar los datos de nuestro formulario.

En la clase Ts, tenemos:

import { Component, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-formulario',
  templateUrl: './formulario.component.html',
  styleUrls: ['./formulario.component.css'],
})

export class FormularioComponent {
	datos:any = {};

 	constructor(private formBuilder: FormBuilder,){
  		this.datos = formBuilder.group({
      			totalIngresos: new FormControl("", {validators: Validators.required, updateOn: 'blur'})
    		}, {updateOn: 'change'});
	
		//Obtener los cambios onchange del formulario
	    	this.datos.valueChanges.subscribe(datos => {
			// Lo que desees hacer
    		});
		
		//Validación de un solo valor del formulario
    		this.datos.get('totalIngresos').valueChanges.subscribe((total) => {
			// Lo que desees hacer
    		});
	}//constructor
}

Con esto podemos evaluar nuestro formulario y observar cualquier cambio en los datos.

Para acceder a cualquier dato del formulario podemos usar:

	this.datos.get('totalIngresos').value; // Valor del campo en el formulario
	this.datos.get('totalIngresos').setValue(valor); //Poner un nuevo valor al campo de nuestro formulario

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados