Angular 4 - Formas

En este capítulo, veremos cómo se usan los formularios en Angular 4. Discutiremos dos formas de trabajar con formularios: formularios controlados por plantillas y formularios controlados por modelos.

Formulario basado en plantillas

Con un formulario basado en plantilla, la mayor parte del trabajo se realiza en la plantilla; y 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 enviaremos el botón en el formulario. Para empezar, necesitamos importar a FormsModule desde@angular/core que se hace en app.module.ts como sigue -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

Entonces en app.module.ts, hemos importado el FormsModule y el 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 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

En lo de arriba app.component.tsarchivo, 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.

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, la identificación del correo electrónico ya está ingresada.

La identificación del correo electrónico se muestra en la parte inferior como se muestra en la captura de pantalla anterior.

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 { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   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 } from '@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 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

La variable formdata se inicializa al comienzo de la clase y la misma se inicializa 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 4, necesitamos importar validadores de@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 un 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.

Ahora, la identificación de correo electrónico ingresada es válida. Por lo tanto, podemos ver que el botón de inicio de sesión está habilitado y el usuario podrá enviarlo. Con esto, la identificación de correo electrónico ingresada se muestra en la parte inferior.

Probemos ahora la validación personalizada con el mismo formulario. Para la validación personalizada, podemos definir nuestra propia función personalizada y agregar los detalles requeridos en ella. Ahora veremos un ejemplo de lo mismo.

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("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length <'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

En el ejemplo anterior, hemos creado una función password validation y lo mismo se usa en una sección anterior en el control de formulario - passwd: new FormControl("", this.passwordvalidation).

En la función que hemos creado, comprobaremos si la longitud de los caracteres introducidos es la adecuada. Si los caracteres son menos de cinco, regresará con la contraseña verdadera como se muestra arriba -return {"passwd" : true};. Si los caracteres son más de cinco, lo considerará válido y se habilitará el inicio de sesión.

Veamos ahora cómo se muestra esto en el navegador:

Hemos introducido solo tres caracteres en la contraseña y el inicio de sesión está desactivado. Para habilitar el inicio de sesión, necesitamos más de cinco caracteres. Ingresemos ahora una longitud válida de caracteres y verifiquemos.

El inicio de sesión está habilitado ya que tanto la identificación de correo electrónico como la contraseña son válidas. El correo electrónico se muestra en la parte inferior cuando iniciamos sesión.

↰ Previous page Next page ↱