Angular 4 - Formas

Neste capítulo, veremos como os formulários são usados no Angular 4. 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 4 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 { }

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

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, maxlengthe 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 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;}
}

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

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 ↱