1

Trabajo con FormGroup y FormControl

Luis Fernando
CUDOX
6807

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>
				<labelclass="cform">¿Cuál es el valor totalde 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 formulariothis.datos.valueChanges.subscribe(datos => {
			// Lo que desees hacer
    		});
		
		//Validación de un solo valor del formulariothis.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 formulariothis.datos.get('totalIngresos').setValue(valor); //Poner un nuevo valor al campo de nuestro formulario
Escribe tu comentario
+ 2