winform窗體模板
介紹 (Introduction)
In this article, we will learn about validations in Angular template-driven forms. We will create a simple user registration form and implement some inbuilt validations on it. Along with the inbuilt validations, we will also implement some custom validations for the template-driven form.
在本文中，我們將學習Angular模板驅動形式的驗證。 我們將創建一個簡單的用戶注冊表單，并在其上實現一些內置的驗證。 除了內置的驗證，我們還將為模板驅動的表單實現一些自定義驗證。
We will consider the following custom validations for this demo:
我們將為此演示考慮以下自定義驗證：
- Checking for user name availability 檢查用戶名可用性
- Password pattern validation 密碼模式驗證
- Matching the password entered in two different fields 匹配在兩個不同字段中輸入的密碼
Take a look at the application in action.
看一下實際的應用程序。
先決條件 (Prerequisites)
Install Visual Studio code from here
從這里安裝Visual Studio代碼
Install the latest version of Angular CLI from here
從此處安裝最新版本的Angular CLI
Install the latest LTS version of Node.js from here
從此處安裝最新的LTS版本的Node.js
源代碼 (Source Code)
You can get the source code from GitHub.
您可以從GitHub獲取源代碼。
創建Angular應用 (Create the Angular app)
Navigate to the folder where you want to create your project file. Open a command window and run the command shown below:
導航到要在其中創建項目文件的文件夾。 打開命令窗口并運行以下命令：
ng new angular-forms-validation --routing=false --style=scssWe are specifying the command to create a new Angular application. The option to create the routing module is set to false and style files extension is set to SCSS. This command will create the Angular project with the name angular-forms-validation.
我們正在指定創建新Angular應用程序的命令。 創建路由模塊的選項設置為false，樣式文件擴展名設置為SCSS。 此命令將使用名稱angular-forms-validation創建Angular項目。
Change directories to the new project and open the project in VS Code using the set of commands below:
將目錄更改為新項目，并使用以下命令集在VS Code中打開項目：
cd angular-forms-validation
code .安裝引導程序 (Install Bootstrap)
Run the following command to install Bootstrap:
運行以下命令以安裝Bootstrap：
npm install bootstrap --saveAdd the following import definition in the styles.scss file:
在styles.scss文件中添加以下導入定義：
@import "~bootstrap/dist/css/bootstrap.css";創建驗證服務 (Create the validation service)
Run the following command to create a new service:
運行以下命令以創建新服務：
ng g s services\customvalidationThis command will create a folder named services that has two files inside it – customvalidation.service.ts and customvalidation.service.spec.ts. Open customvalidation.service.ts and put the following code inside it:
此命令將創建一個名為services的文件夾，其中有兩個文件– customvalidation.service.ts和customvalidation.service.spec.ts 。 打開customvalidation.service.ts并將以下代碼放入其中：
import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';@Injectable({providedIn: 'root'
})
export class CustomvalidationService {patternValidator(): ValidatorFn {return (control: AbstractControl): { [key: string]: any } => {if (!control.value) {return null;}const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');const valid = regex.test(control.value);return valid ? null : { invalidPassword: true };};}MatchPassword(password: string, confirmPassword: string) {return (formGroup: FormGroup) => {const passwordControl = formGroup.controls[password];const confirmPasswordControl = formGroup.controls[confirmPassword];if (!passwordControl || !confirmPasswordControl) {return null;}if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {return null;}if (passwordControl.value !== confirmPasswordControl.value) {confirmPasswordControl.setErrors({ passwordMismatch: true });} else {confirmPasswordControl.setErrors(null);}}}userNameValidator(userControl: AbstractControl) {return new Promise(resolve => {setTimeout(() => {if (this.validateUserName(userControl.value)) {resolve({ userNameNotAvailable: true });} else {resolve(null);}}, 1000);});}validateUserName(userName: string) {const UserList = ['ankit', 'admin', 'user', 'superuser'];return (UserList.indexOf(userName) > -1);}
}The method patternValidator is used to validate the password pattern in our form. The parameter for this method is of type AbstractControl which is a base class for the FormControl.
patternValidator方法用于驗證表單中的密碼模式。 此方法的參數類型為AbstractControl ，它是FormControl的基類。
We will use a regular expression to validate the password. This regular expression will check for the following four conditions in the password:
我們將使用正則表達式來驗證密碼。 此正則表達式將檢查密碼中的以下四個條件：
- The password should be a minimum of eight characters long 密碼長度至少為八個字符
- It should have at least one lower case letter 至少應有一個小寫字母
- It should have at least one upper case letter 它應該至少包含一個大寫字母
- It should have at least one number 它應該至少有一個數字
If the password fails the regex check, we will set the invalidPassword property to true.
如果密碼未通過正則表達式檢查，我們會將invalidPassword屬性設置為true。
The method MatchPassword is used to compare the passwords in two fields. This method will accept two parameters of type string. These parameters represent the name of the fields to be matched. We will get the FormControl for these two fields and then match the values in them. If the values do not match, we will set the passwordMismatch property to true.
MatchPassword方法用于比較兩個字段中的密碼。 此方法將接受兩個字符串類型的參數。 這些參數表示要匹配的字段的名稱。 我們將獲得這兩個字段的FormControl ，然后匹配它們中的值。 如果值不匹配，我們將passwordMismatch屬性設置為true。
The method userNameValidator is used to verify if the username is already taken or not. This method will accept a parameter of type AbstractControl.
方法userNameValidator用于驗證用戶名是否已被使用。 此方法將接受類型為AbstractControl的參數。
We will check if the value of this field is present in a static array, UserList. If the value entered by the user is already present, we will set the userNameNotAvailable property to true.
我們將檢查此字段的值是否存在于靜態數組UserList中。 如果用戶輸入的值已經存在，則將userNameNotAvailable屬性設置為true。
We are using the setTimeout function to invoke this check every two seconds. This will ensure that the error will be thrown after two seconds from the time the user stops typing in the field.
我們正在使用setTimeout函數每兩秒鐘調用一次此檢查。 這將確保從用戶停止在該字段中鍵入內容起兩秒鐘后將引發該錯誤。
For the sake of simplicity of this article, we are using a static array to search for the availability of user names. Ideally, it should be a service call to the server to search for the value in a database.
為了簡化本文，我們使用靜態數組來搜索用戶名的可用性。 理想情況下，應該是對服務器的服務調用，以在數據庫中搜索值。
創建用戶模型 (Create the User model)
Create a new folder called models inside the src/app folder. Add a new file called user.ts inside the models folder. Put the following code in the user.ts file.
在src/app文件夾中創建一個名為models的新文件夾。 在models文件夾中添加一個名為user.ts的新文件。 將以下代碼放入user.ts文件中。
export class User {public name: string;public email: string;public username: string;public password: string;public confirmPassword: string;
}創建自定義指令 (Create custom directives)
We will create custom directives to implement custom validators for template-driven forms.
我們將創建自定義指令，以為模板驅動的表單實現自定義驗證器。
Run the command shown below to create the passwordPattern directive:
運行下面顯示的命令以創建passwordPattern指令：
ng g d directives\passwordPatternThis command will create a folder named directives that has two files inside it – passwordPattern.directive.ts and passwordPattern.directive.spec.ts. Open passwordPattern.directive.ts and put the following code inside it.
此命令將創建一個名為指令的文件夾，其中有兩個文件– passwordPattern.directive.ts和passwordPattern.directive.spec.ts 。 打開passwordPattern.directive.ts并將以下代碼放入其中。
import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';@Directive({selector: '[appPasswordPattern]',providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }]
})
export class PasswordPatternDirective implements Validator {constructor(private customValidator: CustomvalidationService) { }validate(control: AbstractControl): { [key: string]: any } | null {return this.customValidator.patternValidator()(control);}
}This directive is used to validate the password pattern. We will implement the Validator interface on the class PasswordPatternDirective. We will override the validate method which accepts a parameter of type AbstractControl, that is the control we want to validate. We will then invoke the patternValidator method from the service.
此偽指令用于驗證密碼模式。 我們將在類PasswordPatternDirective上實現Validator接口。 我們將覆蓋validate方法，該方法接受類型為AbstractControl的參數，這是我們要驗證的控件。 然后，我們將從服務中調用patternValidator方法。
Run the command shown below to create the matchPassword directive:
運行以下所示的命令以創建matchPassword指令：
ng g d directives\matchPasswordOpen matchPassword.directive.ts and put the following code inside it:
打開matchPassword.directive.ts并將以下代碼放入其中：
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';@Directive({selector: '[appMatchPassword]',providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
})
export class MatchPasswordDirective implements Validator {@Input('appMatchPassword') MatchPassword: string[] = [];constructor(private customValidator: CustomvalidationService) { }validate(formGroup: FormGroup): ValidationErrors {return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);}
}This directive is used to validate if the passwords entered in two fields are matching or not. This directive will accept an input of the type string array, which contains the fields to match. We will override the validate method and pass the parameter of type FormGroup. We will then invoke the MatchPassword method from the service.
此偽指令用于驗證在兩個字段中輸入的密碼是否匹配。 該指令將接受類型為字符串數組的輸入，其中包含要匹配的字段。 我們將覆蓋validate方法，并傳遞FormGroup類型的參數。 然后，我們將從服務中調用MatchPassword方法。
Run the command shown below to create the validateUserName directive:
運行下面顯示的命令以創建validateUserName指令：
ng g d directives\validateUserNameOpen validateUserName.directive.ts and put the following code inside it:
打開validateUserName.directive.ts并將以下代碼放入其中：
import { Directive, forwardRef } from '@angular/core';
import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';
import { Observable } from 'rxjs';@Directive({selector: '[appValidateUserName]',providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }]})
export class ValidateUserNameDirective implements Validator {constructor(private customValidator: CustomvalidationService) { }validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {return this.customValidator.userNameValidator(control);}
}This directive is used to validate the availability of the user name. We will override the validate method and pass the parameter of type AbstractControl. We will then invoke the userNameValidator method from the service. This method will return a promise.
該偽指令用于驗證用戶名的可用性。 我們將覆蓋validate方法并傳遞類型AbstractControl的參數。 然后，我們將從服務中調用userNameValidator方法。 此方法將返回一個承諾。
創建模板驅動的表單組件 (Create the template-driven form component)
Run the command shown below to create the template-driven-form component:
運行下面顯示的命令以創建模板驅動表單組件：
ng g c template-driven-formOpen template-driven-form.component.ts and put the following code in it:
打開template-driven-form.component.ts并將以下代碼放入其中：
import { Component } from '@angular/core';
import { User } from '../models/user';@Component({selector: 'app-template-driven-form',templateUrl: './template-driven-form.component.html',styleUrls: ['./template-driven-form.component.scss']
})
export class TemplateDrivenFormComponent {userModal = new User();constructor() { }onSubmit() {alert('Form Submitted succesfully!!!\n Check the values in browser console.');console.table(this.userModal);}
}We have created an object userModal of type User. We will bind the form fields with the property of this object. The onSubmit method will show the success message on the screen and print the contents of the form to the console.
我們已經創建了類型為User的對象userModal 。 我們將表單域與該對象的屬性綁定。 onSubmit方法將在屏幕上顯示成功消息，并將表單內容打印到控制臺。
Open template-driven-form.component.html and put the following code in it:
打開template-driven-form.component.html并將以下代碼放入其中：
<div class="container"><div class="row"><div class="col-md-8 mx-auto"><div class="card"><div class="card-header"><h3>Angular Template-driven Form</h3></div><div class="card-body"><form class="form" #registerForm="ngForm" [appMatchPassword]="['password', 'confirmPassword']"(ngSubmit)="registerForm.form.valid && onSubmit()" novalidate><div class=" form-group"><label>Name</label><input type="text" class="form-control" [(ngModel)]="userModal.name" name="name"#name="ngModel" required><span class="text-danger"*ngIf="(name.touched || registerForm.submitted) && name.errors?.required">Name is required</span></div><div class="form-group"><label>Email</label><input type="text" class="form-control" [(ngModel)]="userModal.email" name="email"#email="ngModel" required email><span class="text-danger"*ngIf="(email.touched || registerForm.submitted) && email.errors?.required">Email is required</span><span class="text-danger" *ngIf="email.touched && email.errors?.email">Enter a valid email address</span></div><div class="form-group"><label>User Name</label><input type="text" class="form-control" [(ngModel)]="userModal.username" name="username"#username="ngModel" appValidateUserName required><span class="text-danger"*ngIf="(username.touched || registerForm.submitted) && username.errors?.required">User Name is required</span><span class="text-danger" *ngIf="username.touched && username.errors?.userNameNotAvailable">User Name not available</span></div><div class="form-group"><label>Password</label><input type="password" class="form-control" [(ngModel)]="userModal.password" name="password"#password="ngModel" appPasswordPattern required><span class="text-danger"*ngIf="(password.touched || registerForm.submitted) && password.errors?.required">Password is required</span><span class="text-danger" *ngIf="password.touched && password.errors?.invalidPassword">Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercaseletter and 1 number</span></div><div class="form-group"><label>Confirm Password</label><input type="password" class="form-control" [(ngModel)]="userModal.confirmPassword"name="confirmPassword" #confirmPassword="ngModel" required><span class="text-danger"*ngIf="(confirmPassword.touched || registerForm.submitted) && confirmPassword.errors?.required">Confirm Password is required</span><span class="text-danger"*ngIf="confirmPassword.touched && confirmPassword.errors?.passwordMismatch">Passwords doesnot match</span></div><div class="form-group"><button type="submit" class="btn btn-success">Register</button></div></form></div></div></div></div>
</div>We will create a template-driven form and use the Bootstrap card for styling. The card header will contain a title whereas the card body will have the form fields.
我們將創建一個模板驅動的表單，并使用Bootstrap卡進行樣式設置。 卡片標題將包含標題，而卡片正文將具有表單字段。
We will use the appMatchPassword directive on our form and pass the password and confirmPassword fields for validation. The ngModel property is used to bind the form control to the model.
我們將在appMatchPassword上使用appMatchPassword指令，并傳遞密碼和confirmPassword字段進行驗證。 ngModel屬性用于將表單控件綁定到模型。
For validating the user name availability we will use the appValidateUserName directive on the username field. Similarly, we will use the appPasswordPattern directive on the password field to validate the password pattern.
為了驗證用戶名的可用性，我們將在用戶名字appValidateUserName上使用appValidateUserName指令。 同樣，我們將在密碼字段上使用appPasswordPattern指令來驗證密碼模式。
We will check for the errors in the form controls and then display the appropriate validation error message on the screen.
我們將檢查表單控件中的錯誤，然后在屏幕上顯示相應的驗證錯誤消息。
創建導航欄組件 (Create the nav-bar component)
Run the command shown below to create the nav-bar component:
運行下面顯示的命令以創建導航欄組件：
ng g c nav-barOpen nav-bar.component.html and put the following code in it:
打開nav-bar.component.html并將以下代碼放入其中：
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"><a class="navbar-brand" [routerLink]='["/"]'>Form Validation Demo</a><div class="collapse navbar-collapse"><ul class="navbar-nav mr-auto"><li class="nav-item"><a class="nav-link" [routerLink]='["/template-form"]'>Template Form</a></li></ul></div>
</nav>Here we are adding the navigation link to the template-driven form component.
在這里，我們將導航鏈接添加到模板驅動的表單組件。
更新應用程序組件 (Update the app component)
Open the app.component.html file and put the following code in it:
打開app.component.html文件，并將以下代碼放入其中：
<app-nav-bar></app-nav-bar>
<div class="container"><router-outlet></router-outlet>
</div>更新應用程序模塊 (Update the App module)
We will import the forms module and also set up the routing for our application in the app module. Add the following code in the app.module.ts file. You can refer to GitHub for the complete source code of this file:
我們將導入表單模塊，并在app模塊中為我們的應用程序設置路由。 在app.module.ts文件中添加以下代碼。 您可以參考GitHub以獲得此文件的完整源代碼：
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';@NgModule({... imports: [...FormsModule,RouterModule.forRoot([{ path: '', component: TemplateDrivenFormComponent },{ path: 'template-form', component: TemplateDrivenFormComponent }]),],
})執行演示 (Execution demo)
Use the following command to start the webserver:
使用以下命令啟動網絡服務器：
ng serve -oThis command will launch the application in your default browser at http://localhost:4200/. You can perform all the form validations which we have discussed here.
此命令將在您的默認瀏覽器http://localhost:4200/啟動應用程序。 您可以執行我們在此處討論的所有表單驗證。
This application is also hosted at https://ng-forms-validation.herokuapp.com/. Navigate to the link and play around with it for a better understanding.
此應用程序還托管在https://ng-forms-validation.herokuapp.com/上 。 導航至該鏈接，并對其進行處理以更好地理解。
摘要 (Summary)
We have created a sample user registration form using the template-driven form approach in Angular. We have implemented the inbuilt validations as well as custom validations to the form. The Bootstrap library is used to style the form.
我們使用Angular中的模板驅動表單方法創建了一個示例用戶注冊表單。 我們已經實現了表單的內置驗證以及自定義驗證。 Bootstrap庫用于設置表單樣式。
Get the source code from GitHub and play around with it for a better understanding.
從GitHub獲取源代碼并試用它，以更好地理解。
也可以看看 (See Also)
Reactive Form Validation In Angular
Angular的React形式驗證
Localization In Angular Using i18n Tools
使用i18n工具在Angular中進行本地化
Policy-Based Authorization In Angular Using JWT
使用JWT在Angular中基于策略的授權
ASP.NET Core – Using Highcharts With Angular 5
ASP.NET Core –在Angular 5中使用Highcharts
ASP.NET Core – CRUD Using Angular And Entity Framework Core
ASP.NET Core –使用Angular和Entity Framework Core的CRUD
You can find this post Template-Driven Form Validation In Angular and others like it on Ankit Sharma's Blog.
您可以在Ankit Sharma的Blog上找到這篇文章Angular中的模板驅動表單驗證和其他類似文章 。
翻譯自: https://www.freecodecamp.org/news/how-to-validate-angular-template-driven-forms/
winform窗體模板
和==)
