Introduction à deux méthodes de validation de formulaire angulaire

Pour les développeurs front-end, les formulaires sont très importants, car ils sont responsables de l'interaction entre les utilisateurs et les programmes. Il réalise une partie de la fonction de vérification des données pour réduire la pression sur le serveur. Cet article présente deux méthodes de validation de formulaire angulaire.

Validation basée sur un modèle

Afin d'ajouter une validation au formulaire basé sur un modèle, vous devez ajouter quelques attributs de validation Voici un exemple de connexion utilisateur. interface

1 : Créer un nouveau projet

Accédez au chemin de travail, exécutez ng new valicate pour créer un projet angulaire, puis ouvrez-le avec vscode

Deux : Modifier le fichier modèle app.component.html

Créer un formulaire avec deux zones de saisie, à savoir le nom d'utilisateur et le mot de passe . Ensuite, procédez avec ces deux zones de saisie. Vérifiez que les styles utilisés dans le code

app.component.html

<br><br>
<p>
    </p><p>
        </p><p>
        </p>
        <p>
      </p><h1 id="Login">Login</h1>
            

                

                                                                   Email address                                                           

                

                                                                   Password                                                           

                                     Submit                              

                 

        

    

sont tous les styles CSS fournis dans Bootstrap 4. les depuis son site officiel.
Le style final est le suivant :

Trois : Ajouter une validation
Premier dans app.module.ts, Ajoutez le module FormsModule et ajoutez-le au tableau d'importations

app.module.ts

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

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ajoutez ensuite un validateur dans la page du modèle

Ajouter une validation Le L'effet final de app.component.html

<br><br>
<p>
    </p><p>
        </p><p>
        </p>
        <p>
      </p><h1 id="Login">Login</h1>
            

                

                                                                   Email address                                         

        

          请输入邮箱地址！         

                

                                                                   Password                                                           

                                     Submit                              

                 

        

    

est le suivant :

Quatre : choses à noter
L'attribut name doit être ajouté à la balise Input, et #name ne peut pas être identique au nom de l'attribut de la classe dans ts, comme le montre la figure

Validation des formulaires responsives

1 : Référencer ReactiveFormsModule dans app.module.ts

app.module.ts

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

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { StudentComponent } from './student/student.component';

@NgModule({
   declarations: [
      AppComponent,
      StudentComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

Recommandations d'articles connexes :

Définition d'événement Javascript, événements de liaison et langage de commande pilotés par les événements

Explication détaillée de la portée + fermeture en Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!