Angular7 - Formularios

En este capítulo, veremos cómo se usan los formularios en Angular 7. Discutiremos dos formas de trabajar con formularios:

Formulario basado en plantillas
Forma dirigida por modelo

Formulario basado en plantillas

Con un formulario basado en plantilla, la mayor parte del trabajo se realiza en la plantilla. Con la forma dirigida por modelo, la mayor parte del trabajo se realiza en la clase de componente.

Consideremos ahora trabajar en el formulario basado en plantillas. Crearemos un formulario de inicio de sesión simple y agregaremos la identificación de correo electrónico, la contraseña y el botón de envío en el formulario. Para empezar, necesitamos importar a FormsModule desde @ angular / forms, que se hace en app.module.ts de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop'; 
import { FormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      FormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Entonces en app.module.ts, hemos importado el FormsModule y lo mismo se agrega en la matriz de importaciones como se muestra en el código resaltado.

Creemos ahora nuestro formulario en el app.component.html archivo.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)"> 
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel> 
   <br/> 
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel> 
   <br/> 
   <input type = "submit" value = "submit"> 
</form>

Hemos creado un formulario simple con etiquetas de entrada que tienen una identificación de correo electrónico, una contraseña y el botón de enviar. Le hemos asignado tipo, nombre y marcador de posición.

En formularios controlados por plantillas, necesitamos crear los controles de formulario modelo agregando el ngModel directiva y la nameatributo. Por lo tanto, donde queramos que Angular acceda a nuestros datos desde formularios, agregue ngModel a esa etiqueta como se muestra arriba. Ahora, si tenemos que leer el emailid y passwd, necesitamos agregar el ngModel en él.

Si ve, también hemos agregado el ngForm al #userlogin. losngFormLa directiva debe agregarse a la plantilla de formulario que hemos creado. También hemos añadido funciónonClickSubmit y asignado userlogin.value lo.

Creemos ahora la función en el app.component.ts y recuperar los valores ingresados en el formulario.

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css']
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   constructor(private myservice: MyserviceService) { } 
   ngOnInit() { } 
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid); 
   }
}

En el archivo app.component.ts anterior, hemos definido la función onClickSubmit. Al hacer clic en el botón de envío del formulario, el control llegará a la función anterior.

El css para el formulario de inicio de sesión se agrega en app.component.css -

input[type = text], input[type = password] { 
   width: 40%; 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
} 
input[type = submit] { 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
}

Así es como se muestra el navegador:

El formulario se ve como se muestra a continuación. Ingresemos los datos en él y en la función de envío, se alerta la identificación del correo electrónico como se muestra a continuación:

Forma dirigida por modelo

En la forma dirigida por modelo, necesitamos importar el ReactiveFormsModule de @ angular / forms y usar el mismo en la matriz de importaciones.

Hay un cambio que entra app.module.ts.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      ReactiveFormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

En app.component.ts, necesitamos importar algunos módulos para el formulario basado en modelo. Por ejemplo,import { FormGroup, FormControl } desde '@angular/forms'.

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service'; 
import { FormGroup, FormControl } from '@angular/forms';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'Angular 7 Project!'; 
   emailid; 
   formdata;
   constructor(private myservice: MyserviceService) { }  
   ngOnInit() { 
      this.formdata = new FormGroup({ 
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234") 
      }); 
   } 
   onClickSubmit(data) {this.emailid = data.emailid;}
}

Los datos del formulario variable se inicializan al comienzo de la clase y los mismos se inicializan con FormGroup como se muestra arriba. Las variables emailid y passwd se inicializan con valores predeterminados que se mostrarán en el formulario. Puede dejarlo en blanco en caso de que lo desee.

Así es como se verán los valores en la interfaz de usuario del formulario.

Hemos utilizado formdata para inicializar los valores del formulario; Necesitamos usar lo mismo en la interfaz de usuario del formulario.app.component.html.

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" > 
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid"> 
      <br/> 
      
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd"> 
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In"> 
   </form>
</div> 
<p> Email entered is : {{emailid}} </p>

En el archivo .html, hemos utilizado formGroup entre corchetes para el formulario; por ejemplo, [formGroup] = ”formdata”. Al enviar, la función se llamaonClickSubmit para cual formdata.value esta pasado.

La etiqueta de entrada formControlNamese utiliza. Se le da un valor que hemos utilizado en elapp.component.ts archivo.

Al hacer clic en enviar, el control pasará a la función onClickSubmit, que se define en el app.component.ts archivo.

Al hacer clic en Iniciar sesión, el valor se mostrará como se muestra en la captura de pantalla anterior.

Validación de formulario

Analicemos ahora la validación de formularios utilizando formularios controlados por modelos. Puede utilizar la validación de formulario incorporada o también utilizar el enfoque de validación personalizado. Usaremos ambos enfoques en el formulario. Continuaremos con el mismo ejemplo que creamos en uno de nuestros apartados anteriores. Con Angular 7, necesitamos importarValidators desde @angular/forms como se muestra a continuación -

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular tiene validadores incorporados como mandatory field, minlength, maxlengthy pattern. Se accede a estos mediante el módulo Validadores.

Puede simplemente agregar validadores o una matriz de validadores necesarios para decirle a Angular si un campo en particular es obligatorio. Intentemos ahora lo mismo en uno de los cuadros de texto de entrada, es decir, id de correo electrónico. Para la identificación de correo electrónico, hemos agregado los siguientes parámetros de validación:

Required
La coincidencia de patrones

Así es como se valida un código en app.component.ts.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

En Validators.compose, puede agregar la lista de cosas que desea validar en el campo de entrada. Ahora mismo, hemos agregado elrequired y el pattern matching parámetros para tomar solo correo electrónico válido.

En el app.component.html, el botón enviar está deshabilitado si alguna de las entradas del formulario no es válida. Esto se hace de la siguiente manera:

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)"> 
      <input type = "text" class = "fortextbox" name = "emailid" 
         placeholder = "emailid" formControlName = "emailid"> 
      <br/> 
    
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/> 
      
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In"> 
   </form> 
</div>
<p> Email entered is : {{emailid}} </p>

Para el botón enviar, hemos agregado deshabilitado en el corchete, al que se le da el siguiente valor.

!formdata.valid.

Por lo tanto, si formdata.valid no es válido, el botón permanecerá deshabilitado y el usuario no podrá enviarlo.

Veamos cómo funciona esto en el navegador:

En el caso anterior, la identificación de correo electrónico ingresada no es válida, por lo que el botón de inicio de sesión está desactivado. Intentemos ahora ingresar la identificación de correo electrónico válida y ver la diferencia.

Now, the email id entered is valid. Thus, we can see the login button is enabled and the user will be able to submit it. With this, the email id entered is displayed at the bottom.

Let us now try custom validation with the same form. For custom validation, we can define our own custom function and add the required details in it. We will now see the below example for the same.

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

In the above example, we have created a function passwordvalidation and the same is used in a previous section in the formcontrol - passwd: new FormControl("", this.passwordvalidation).

In the function that we have created, we will check if the length of the characters entered is appropriate. If the characters are less than five, it will return with the passwd true as shown above - return {"passwd" : true};. If the characters are more than five, it will consider it as valid and the login will be enabled.

Let us now see how this is displayed in the browser −

We have entered only three characters in the password and the login is disabled. To enable login, we need more than five characters. Let us now enter a valid length of characters and check.

The login is enabled as both the email id and the password are valid. The email is displayed at the bottom as we log in.

↰ Previous page Next page ↱