Saltar al contenido

formas reactivas angulares tutorialJul, 29thIn este tutorial, vamos a aprender acerca de cómo manejar reactiva …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo manejar los datos de formas reactivas mediante el uso de controles de formulario y forma grupo.

reactiva forma formas

reactivos utilizando el enfoque inmutable a gestionar el estado de forma significa cada vez que cambia el valor de forma obtendrá un nuevo estado de formulario con los valores actualizados. formas

reactivos son síncrona de manera que el estado forma es predecible pero formas de la plantilla impulsada son asíncronos y mutable.

Introducción

Para crear formas reactivas primero tenemos que importar un ReactiveFormsModule del paquete @ / formas angulares y añadido a las importaciones matriz.

import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule, ReactiveFormsModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

controles de formulario Crear

en formas reactivas, que necesitan para crear un control de formulario para cada elemento de la forma que tenemos.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//form control is created by invoking a FormControl constructor
name = new FormControl('');
constructor() {}
}

En el código anterior, en primer lugar, nos importó FormControl constructor de las formas angulares de / @ packageand invoca dentro AppComponent añadiéndolo al nombre de la propiedad valor inicial. control de formulario

Registro

Ahora tenemos que registrar la propiedad de control de formulario con nuestra plantilla presente en el interior de elemento de formulario utilizando Directiva FormControl.


En el código anterior, se ha creado correctamente la comunicación entre el valor de entrada de formulario con la propiedad FormControl modo que cualquier cambio que ocurre en el modelo se actualiza la vista suceden de manera similar los cambios a la vista de una actualización del modelo.

Acceso valor de elemento de formulario

Dentro de la plantilla, podemos acceder al valor de elemento de formulario utilizando nombre de control de formulario. controles de formulario


{{name.value}}

Agrupación

Supongamos que tenemos más de un control de formulario en tales casos conviene agruparlos por usingFormGroup constructor.

Ya aprendió que el control de formulario puede realizar un seguimiento de los cambios de estado del elemento de formulario, mediante la agrupación de los controles de formulario también podemos realizar un seguimiento de los cambios de estado enteros en forma de un grupo formulario.

Vamos a crear nuestro grupo formulario ahora.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//myform group contains two form controls name and email
myform = new FormGroup({ name: new FormControl(''), email: new FormControl('') });
constructor() {}
}

En el código anterior, hemos creado nuestro grupo myform forma llamada con el nombre de dos controles de formularios y correo electrónico. Adjuntar forma

grupo para ver la plantilla de

Let cómo enlazar un grupo controla forma a nuestra plantilla HTML.



En el código anterior, i destacó líneas particulares donde se añade grupo myform a los controles andname elemento de formulario y de correo electrónico se añaden a dos elementos de entrada mediante el uso de formControlName de modo que forma grupo puede realizar un seguimiento de los cambios de estado ocurren en los elementos de entrada.

El someter los valores para conseguir la forma y

Para formulario de presentación angular nos proporciona una propiedad de evento ngSubmit mediante el uso de esto podemos presentar un formulario en nuestro servidor. Método



import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

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

myform = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});

constructor() {}
onSubmit() {
console.log(this.myform.value);
}
}

Dentro onSubmit podemos acceder a los valores de control de formulario utilizando la propiedad myform.value grupo de formularios.

Nota: Envío de formulario evento se activa cuando se hace clic en un botón de envío o pulsando la tecla Intro.

forma

Restablecimiento

también puede restablecer el formulario utilizando resetmethod proporcionada por el grupo formulario.

onSubmit() {
console.log(this.myform.value);
this.myform.reset(); }