Angular 6 - Formas

Neste capítulo, veremos como os formulários são usados no Angular 6. Discutiremos duas maneiras de trabalhar com formulários - formulário dirigido por modelo e formulários dirigidos por modelo.

Formulário baseado em modelo

Com um formulário orientado por modelo, a maior parte do trabalho é feito no modelo; e com a forma dirigida por modelo, a maior parte do trabalho é feita na classe de componentes.

Vamos agora considerar trabalhar no formulário dirigido por modelo. Vamos criar um formulário de login simples e adicionar o id do email, senha e enviar o botão no formulário. Para começar, precisamos importar para o FormsModule de@angular/core que é feito em app.module.ts como segue -

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 { }

Então em app.module.ts, importamos o FormsModule e o mesmo é adicionado na matriz de importações como mostrado no código realçado.

Vamos agora criar nosso formulário no app.component.html Arquivo.

<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>

Nós criamos um formulário simples com tags de entrada com id de e-mail, senha e o botão de envio. Atribuímos tipo, nome e espaço reservado a ele.

Em formulários orientados por modelo, precisamos criar os controles de formulário de modelo adicionando o ngModel diretiva e o nameatributo. Assim, sempre que quisermos que o Angular acesse nossos dados de formulários, adicione ngModel a essa tag, conforme mostrado acima. Agora, se tivermos que ler o emailid e passwd, precisamos adicionar o ngModel nele.

Se você vê, nós também adicionamos o ngForm ao #userlogin. ongForma diretiva precisa ser adicionada ao modelo de formulário que criamos. Também adicionamos funçãoonClickSubmit e atribuído userlogin.value para isso.

Vamos agora criar a função no app.component.ts e buscar os valores inseridos no formulário.

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 6 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

No acima app.component.tsarquivo, definimos a função onClickSubmit. Ao clicar no botão de envio do formulário, o controle acessará a função acima.

É assim que o navegador é exibido -

O formulário é semelhante ao mostrado abaixo. Deixe-nos inserir os dados nele e na função de envio, o id do email já está inserido.

O id do e-mail é exibido na parte inferior, conforme mostrado na imagem acima.

Formulário baseado em modelo

No formulário dirigido por modelo, precisamos importar o ReactiveFormsModule de @ angular / forms e usar o mesmo na matriz de importações.

Há uma mudança 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 { }

No app.component.ts, precisamos importar alguns módulos para o formulário orientado por modelo. Por exemplo,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 6 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;}
}

A variável formdata é inicializada no início da classe e a mesma é inicializada com FormGroup conforme mostrado acima. As variáveis emailid e passwd são inicializadas com valores padrão a serem exibidos no formulário. Você pode mantê-lo em branco, caso queira.

É assim que os valores serão vistos na IU do formulário.

Usamos formdata para inicializar os valores do formulário; precisamos usar o mesmo na interface do usuário do formulárioapp.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>

No arquivo .html, usamos formGroup entre colchetes para o formulário; por exemplo, [formGroup] = "formdata". No envio, a função é chamadaonClickSubmit para qual formdata.value é passado.

A tag de entrada formControlNameé usado. É dado um valor que usamos noapp.component.ts Arquivo.

Ao clicar em enviar, o controle passará para a função onClickSubmit, que é definido no app.component.ts Arquivo.

Ao clicar em Login, o valor será exibido conforme mostrado na imagem acima.

Validação de Formulário

Vamos agora discutir a validação de formulário usando formulário dirigido por modelo. Você pode usar a validação de formulário embutida ou também usar a abordagem de validação personalizada. Usaremos ambas as abordagens no formulário. Continuaremos com o mesmo exemplo que criamos em uma de nossas seções anteriores. Com o Angular 4, precisamos importar validadores de@angular/forms como mostrado abaixo -

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

O Angular tem validadores integrados, como mandatory field, minlength, maxlength, e pattern. Eles devem ser acessados por meio do módulo Validadores.

Você pode apenas adicionar validadores ou uma matriz de validadores necessários para informar ao Angular se um determinado campo é obrigatório.

Vamos agora tentar o mesmo em uma das caixas de texto de entrada, ou seja, id de e-mail. Para o id de e-mail, adicionamos os seguintes parâmetros de validação -

Required
Correspondência de padrões

É assim que um código passa pela validação em 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 6 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;}
}

No Validators.compose, você pode adicionar a lista de coisas que deseja validar no campo de entrada. Agora, nós adicionamos orequired e a pattern matching parâmetros para levar apenas e-mail válido.

No app.component.html, o botão enviar será desativado se alguma das entradas do formulário não for válida. Isso é feito da seguinte maneira -

<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 o botão de envio, adicionamos desativado no colchete, que recebe o valor - !formdata.valid. Assim, se o formdata.valid não for válido, o botão permanecerá desabilitado e o usuário não poderá enviá-lo.

Vamos ver como isso funciona no navegador -

No caso acima, o id de email inserido é inválido, portanto, o botão de login está desabilitado. Vamos agora tentar inserir o ID de e-mail válido e ver a diferença.

Agora, o id de e-mail inserido é válido. Assim, podemos ver que o botão de login está habilitado e o usuário poderá enviá-lo. Com isso, o ID do e-mail inserido é exibido na parte inferior.

Vamos agora tentar a validação personalizada com o mesmo formulário. Para validação personalizada, podemos definir nossa própria função personalizada e adicionar os detalhes necessários nela. Veremos agora um exemplo para o mesmo.

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 6 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;}
}

No exemplo acima, criamos uma função password validation e o mesmo é usado em uma seção anterior no formulário de controle - passwd: new FormControl("", this.passwordvalidation).

Na função que criamos, verificaremos se o comprimento dos caracteres inseridos é adequado. Se os caracteres forem menores que cinco, ele retornará com a senha true conforme mostrado acima -return {"passwd" : true};. Se os caracteres forem mais de cinco, será considerado válido e o login será habilitado.

Vamos agora ver como isso é exibido no navegador -

Inserimos apenas três caracteres na senha e o login está desabilitado. Para habilitar o login, precisamos de mais de cinco caracteres. Vamos agora inserir um comprimento válido de caracteres e verificar.

O login é habilitado porque a id de email e a senha são válidas. O e-mail é exibido na parte inferior quando fazemos login.

↰ Previous page Next page ↱