学习如何在Angular和typecript应用程序中使用输入表单进行URL验证。
本教程适用于所有angular 12和13版本。
Angular URL验证与Reactive表单
首先，在应用程序中，创建一个HTML模板组件来显示输入表单，并做以下步骤：
- 用urlForm绑定的
FormGroup directive来定义表单元素。 - 在表单中，用
formControlName名称的URL定义输入元素 - 绑定验证错误，并可使用
urlForm.controls[url] - 对输入框不是空的(error.required)和焦点在里面的(touch)添加验证检查。
- 如果绑定的错误包含必填，显示错误信息 "URL是必填的
- 如果错误包含模式，显示错误信息 "URL格式是错误的"。
<div>
<h2>{{ heading | titlecase }}</h2>
<form [formGroup]="urlForm">
<input type="text" formControlName="url" />
<div *ngIf="!urlForm.controls['url'].valid && urlForm.controls['url'].touched">
<div *ngIf="urlForm.controls['url'].errors.required" style="background-color: red">
URL is required
</div>
<div *ngIf="urlForm.controls['url'].errors.pattern" style="background-color: red">
URL format is wrong
</div>
</div>
</form>
<button type="submit ">Submit</button>
</div>
下一步，在应用控制器组件中，定义REGEX模式验证的逻辑：
- 声明urlForm的类型
FormGroup，它已经与表单元素绑定。 - 将
URL regular expression pattern定义为变量 - 在构造函数中，用新的表单控件即URL初始化了urlForm。
- 这些URL表单控件将与HTML模板中的输入元素绑定。
Validators.required增加了非空的验证检查Validators.pattern增加了URL正则表达式- 这些验证是通过
blur事件`updateOn: blur'属性检查的。
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
heading = 'angular url pattern validation with examples';
urlForm: FormGroup;
myusername: string = '';
urlRegEx =
'[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?';
constructor() {
this.urlForm = new FormGroup({
url: new FormControl('', {
validators: [Validators.required, Validators.pattern(this.urlRegEx)],
updateOn: 'blur',
}),
});
}
submit() {
console.log(this.urlForm.value);
}
}
你在浏览器中看到的输出是
Angular html5输入类型的URL模式验证
在现代浏览器中，简单的方法是用内置的html5语言进行URL模式验证。
另一种做URL验证的方法是在HTML元素中定义input type=url 。然而，这只支持html5和现代浏览器。
输入是用以下属性定义的：
<input type="url" name="websiteurl" id="websiteurl" placeholder="https://example.com" [(ngModel)]="websiteurl" [ngModelOptions]="{ updateOn: 'blur' }" #urlerror="ngModel" pattern="[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)? "
type=url 是一个输入文本框，只接受URLpattern 属性值是URL值的正则表达式模式NgModel 指令支持从视图到控制器的双向绑定，反之亦然ngModelOptions 指令可以改变ngModel值的行为，这将通过 updateon:blur 事件触发。
以下是一个完整的代码
<div>
<input type="url" name="websiteurl" id="websiteurl" placeholder="https://example.com" [(ngModel)]="websiteurl" [ngModelOptions]="{ updateOn: 'blur' }" #urlerror="ngModel" pattern="[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)? "
required />
<div *ngIf="urlerror.invalid && (urlerror.dirty || urlerror.touched)">
<div *ngIf="urlerror.errors.required">
<span style="background-color: red">URL is required </span>
</div>
<div *ngIf="urlerror.errors.pattern">
<span style="background-color: red">Invalid URL </span>
</div>
</div>
</div>
在组件中，只需在这里声明输入元素的名称和默认值即可：
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
heading = 'angular html5 URL pattern validation example';
websiteurl: string = '';
}
Typecript url regexp验证
有时，我们想对typescript文件进行验证：
- 它使用上述同样的正则表达式模式进行URL验证
- 使用正则表达式创建正则对象
pattern.test对提供的URL进行检查，并返回true-valid
public isValidUrl(urlString: string): boolean {
try {
let pattern = new RegExp(this.urlRegEx);
let valid = pattern.test(urlString);
return valid;
} catch (TypeError) {
return false;
}
}
}
}
console.log(this.isValidUrl('https://www.google.com')); // true
console.log(this.isValidUrl('google')); // false
Angular URL验证错误不工作
让我们看看当你处理Angular表单时，你会得到哪些错误？
- 错误NG8002。不能绑定到'formGroup'，因为它不是'form'的一个已知属性。
应用程序无法定位formGroup 。
formGroup 是一个定义在 FormGroupDirective 指令中的选择器。这个指令被定义在 ReactiveFormsModule。
总结
在这篇文章中，你学到了
- 用反应式表单进行Angular URL模式验证的例子
- HTML 5输入类型的URL表单验证
- Typecript URL验证
