Angolare 6 - Forme

In questo capitolo, vedremo come vengono utilizzati i moduli in Angular 6. Discuteremo due modi di lavorare con i moduli: modulo basato su modelli e moduli basati su modello.

Modulo basato su modello

Con un modulo basato su modello, la maggior parte del lavoro viene svolto nel modello; e con il modulo basato sul modello, la maggior parte del lavoro viene svolto nella classe dei componenti.

Consideriamo ora di lavorare sul modulo basato su modelli. Creeremo un semplice modulo di accesso e aggiungeremo l'ID e-mail, la password e invieremo il pulsante nel modulo. Per cominciare, dobbiamo importare in FormsModule da@angular/core che viene fatto in app.module.ts come 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 { }

Quindi dentro app.module.ts, abbiamo importato il FormsModule e lo stesso viene aggiunto nell'array delle importazioni come mostrato nel codice evidenziato.

Creiamo ora il nostro modulo nel file app.component.html file.

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

Abbiamo creato un semplice modulo con tag di input con ID e-mail, password e pulsante di invio. Gli abbiamo assegnato tipo, nome e segnaposto.

Nei moduli basati su modelli, è necessario creare i controlli del modulo modello aggiungendo l'estensione ngModel direttiva e il nameattributo. Pertanto, ovunque desideriamo che Angular acceda ai nostri dati dai moduli, aggiungi ngModel a quel tag come mostrato sopra. Ora, se dobbiamo leggere emailid e passwd, dobbiamo aggiungere ngModel attraverso di esso.

Se vedi, abbiamo anche aggiunto ngForm al file #userlogin. IlngFormla direttiva deve essere aggiunta al modello di modulo che abbiamo creato. Abbiamo anche aggiunto la funzioneonClickSubmit e assegnato userlogin.value ad esso.

Creiamo ora la funzione nel file app.component.ts e recupera i valori inseriti nel modulo.

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

In quanto sopra app.component.tsfile, abbiamo definito la funzione suClickSubmit. Quando fai clic sul pulsante di invio del modulo, il controllo arriverà alla funzione sopra.

Ecco come viene visualizzato il browser:

Il modulo ha l'aspetto mostrato di seguito. Inseriamo i dati in esso e nella funzione di invio, l'ID e-mail è già inserito.

L'ID e-mail viene visualizzato in basso come mostrato nello screenshot qui sopra.

Forma guidata dal modello

Nel modulo basato su modello, dobbiamo importare ReactiveFormsModule da @ angular / forms e utilizzare lo stesso nell'array imports.

C'è un cambiamento in atto 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 { }

Nel app.component.ts, dobbiamo importare alcuni moduli per il modulo basato su modello. Per esempio,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;}
}

La variabile formdata viene inizializzata all'inizio della classe e la stessa viene inizializzata con FormGroup come mostrato sopra. Le variabili emailid e passwd vengono inizializzate con valori predefiniti da visualizzare nel modulo. Puoi tenerlo vuoto nel caso lo desideri.

Questo è il modo in cui i valori saranno visualizzati nell'interfaccia utente del modulo.

Abbiamo usato formdata per inizializzare i valori del form; dobbiamo usare lo stesso nella UI del moduloapp.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>

Nel file .html, abbiamo usato formGroup tra parentesi quadre per il form; ad esempio, [formGroup] = "formdata". Al momento dell'invio, viene chiamata la funzioneonClickSubmit per cui formdata.value è passato.

Il tag di input formControlNamesi usa. Viene assegnato un valore che abbiamo utilizzato inapp.component.ts file.

Facendo clic su Invia, il controllo passerà alla funzione onClickSubmit, che è definito in app.component.ts file.

Facendo clic su Accedi, il valore verrà visualizzato come mostrato nella schermata sopra.

Convalida del modulo

Parliamo ora della convalida del modulo utilizzando il modulo basato su modello. È possibile utilizzare la convalida del modulo incorporata o anche l'approccio di convalida personalizzato. Useremo entrambi gli approcci nella forma. Continueremo con lo stesso esempio che abbiamo creato in una delle nostre sezioni precedenti. Con Angular 4, dobbiamo importare i validatori da@angular/forms come mostrato di seguito -

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

Angular ha validatori integrati come mandatory field, minlength, maxlength, e pattern. È possibile accedervi utilizzando il modulo Validators.

Puoi semplicemente aggiungere validatori o un array di validatori richiesti per dire ad Angular se un particolare campo è obbligatorio.

Proviamo ora lo stesso su una delle caselle di testo di input, ad esempio, l'ID email. Per l'ID e-mail, abbiamo aggiunto i seguenti parametri di convalida:

Required
Corrispondenza del modello

Questo è il modo in cui un codice viene convalidato in 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;}
}

Nel Validators.compose, puoi aggiungere l'elenco delle cose che desideri convalidare nel campo di input. In questo momento, abbiamo aggiunto il filerequired e il pattern matching parametri per accettare solo email valide.

Nel app.component.html, il pulsante di invio è disabilitato se uno qualsiasi degli input del modulo non è valido. Questo viene fatto come segue:

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

Per il pulsante di invio, abbiamo aggiunto disabilitato nella parentesi quadra, a cui viene assegnato il valore: !formdata.valid. Pertanto, se formdata.valid non è valido, il pulsante rimarrà disabilitato e l'utente non sarà in grado di inviarlo.

Vediamo come funziona nel browser -

Nel caso precedente, l'ID e-mail inserito non è valido, quindi il pulsante di accesso è disabilitato. Proviamo ora a inserire l'ID e-mail valido e vediamo la differenza.

Ora, l'ID e-mail inserito è valido. Quindi, possiamo vedere che il pulsante di accesso è abilitato e l'utente sarà in grado di inviarlo. Con questo, l'ID e-mail inserito viene visualizzato in basso.

Proviamo ora la convalida personalizzata con lo stesso modulo. Per la convalida personalizzata, possiamo definire la nostra funzione personalizzata e aggiungere i dettagli richiesti in essa. Vedremo ora un esempio per lo stesso.

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

Nell'esempio sopra, abbiamo creato una funzione password validation e lo stesso è usato in una sezione precedente nel formcontrol - passwd: new FormControl("", this.passwordvalidation).

Nella funzione che abbiamo creato, controlleremo se la lunghezza dei caratteri inseriti è adeguata. Se i caratteri sono inferiori a cinque, tornerà con il passwd true come mostrato sopra -return {"passwd" : true};. Se i caratteri sono più di cinque, verrà considerato valido e verrà abilitato il login.

Vediamo ora come viene visualizzato nel browser -

Abbiamo inserito solo tre caratteri nella password e il login è disabilitato. Per abilitare il login, abbiamo bisogno di più di cinque caratteri. Inseriamo ora una lunghezza di caratteri valida e controlliamo.

L'accesso è abilitato poiché sia l'ID e-mail che la password sono validi. L'e-mail viene visualizzata in basso al momento del login.

↰ Previous page Next page ↱

Angolare 6 - Forme

Modulo basato su modello

Forma guidata dal modello

Convalida del modulo

Tutorial di Angular 6

Risorse utili di Angular 6