我们会在本文中探索角2内建的自定义验证。
角2原生就支持一些有用的验证器:
<李>要求:验证字段必须存在李
<李>最小长度:验证字段值的最小长度有效李
<李>最大长度:验证字段值的最大长度有效李
<李>模式:验证输入的值是否匹配给定的模板,比如邮件李
我们会基于下面的接口创建一个表单来获取用户信息。
//user.interface.ts
出口接口用户{
用户名:字符串;//需要,必须5 - 8字符
电子邮件:字符串;//需要,必须有效的电子邮件格式
密码:字符串;//要求,值必须等于确认密码。
confirmPassword:字符串;//要求,值必须等于密码。
}
仅在字段数据不正确或提交表单的时候,为每个字段显示错误消息。
UI展示:
| - app/| - app.component.html
| - app.component.ts
| - app.module.ts
| - equal-validator.directive.ts
| - main.ts
| - user.interface.ts
| - index . html
| - styles.css
| - tsconfig.json
为了使用新的表单模块,我们需要用npm安装@角/形式指令调用npm包,并在应用程序模块中导入最新的表单模块。
美元npm安装@angular/形式——保存
下面是我们应用程序的app.module。ts模块:
//app.module.ts
从“@angular进口{NgModule}/核心”;
从“@angular/platform-browser”进口{BrowserModule};
从@angular/形式的进口{FormsModule};
进口{AppComponent}”。/app.component ';
@NgModule ({
进口:[BrowserModule、FormsModule]//导入表单模块
声明:[AppComponent],
引导:[AppComponent],
}）
出口类AppModule {}
让我们继续创建应用组件。
//app.component.ts
进口{组件,>
& lt; !——app.component.html祝辞
& lt; div>
& lt; h2>添加user
# f=& lt;形式已经(ngSubmit)=皀gForm保存(f。价值,f.valid)”在
& lt; !——我们将把验证的字段放在这里——比;
& lt;按钮类型=疤峤弧?残疾人)=? myForm.valid”祝辞Submit
& lt;/form>
& lt;/div>
现在来一个个添加控件。
需求:必填,长度在5 - 8个字符之间
& lt; !——app.component.html祝辞
…
& lt; div>
& lt; label> Username
& lt;输入类型="文本" name="用户名" [ngModel]=皍ser.username”
所需的最小长度=" 5 "最大长度=" 8 " #用户名=皀gModel”比;
& lt;小[隐藏]="用户名。有效| |(用户名。原始的,,祝辞! f.submitted)”;
用户名是必需的(至少5字符)。
& lt;/small>
& lt;/div>
& lt;前* ngIf=皍sername.errors”在{{用户名。错误| json}} & lt;/pre>
…
要求,最小长度,最大长度都是内置的验证器,所以很容易使用。
我们只会在用户名无效,获得焦点和提交表单的情况下显示错误消息。最后一条的前标签在开发过程中对调试很有用。它会显示字段的所有验证错误。
需求:必填,必须是有效的电子邮件地址格式
& lt; !——app.component.html祝辞
…
& lt; div>
& lt; label> Email
& lt;输入类型="电子邮件" name="电子邮件" [ngModel]=皍ser.email”
[所需模式=" ^ - za - z0 - 9 _。+ -) + @ [a-zA-Z0-9 -] + [a-zA-Z0-9 -。+ $ " #邮件=" ngModel”比;
& lt;小[隐藏]="电子邮件。有效| |(电子邮件。原始的,,祝辞! f.submitted)”;
电子邮件是要求和格式应该& lt; i> john@doe.com。
& lt;/small>
& lt;/div>
…
我们把邮箱设置为必填,然后使用内建的模板验证器,通过正则表达式来检查邮件的值:^ [a-zA-Z0-9_。+ -) + @ a-zA-Z0-9 - +。[a-zA-Z0-9 -) +美元。
需求:
<李>密码:必填,值必须与确认密码的值相同。
<李>确认密码:必填,值必须与密码的值相同。
