1. 创建指令
|
1
|
ng g directive directives/mobileValidator
|
2. html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
form
#myForm="ngForm" (ngSubmit)="onSubmit2(myForm.value, myForm.valid)">
<
div
>
<
h3
>登录</
h3
>
</
div
>
<
div
>用户名：<
input
ngModel required name="username" type="text" (input)="onMobileInput(myForm)"></
div
>
<
div
[hidden]="mobileValid || moblieUntouched">
<
div
[hidden]="!myForm.form.hasError('required','username')">
用户名是必填项
</
div
>
</
div
>
<
div
>电话： <
input
ngModel mobile name="mobile" type="text"></
div
>
<
button
type="submit">登录</
button
>
</
form
>
|
3. 控制器
|
1
2
3
4
5
6
7
8
9
|
mobileValid: boolean = true;
moblieUntouched: boolean = true;
onMobileInput(form: NgForm) {
if (form) {
this.mobileValid = form.form.get('mobile').valid;
this.moblieUntouched = form.form.get('mobile').untouched;
}
}
|
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7346133.html，如需转载请自行联系原作者
