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