component.ts
import{Component,OnInit,OnDestroy}from'@angular/core';
import{FormGroup,Validators,FormBuilder}from'@angular/forms';//引入表单的一些特性
import{Router}from'@angular/router';
import{AccountService}from'../../services/account.service';
import{environment}from'../../../../../environments/environment';
import{flyIn}from'../../../../animation/flyIn';
import{Observable}from'rxjs/Observable';
@Component（{
selector:
'app-login',
templateUrl:
'./ponent.html',
styleUrls:
['./ponent.scss'],
animations:
[flyIn]
}）
exportclassLoginComponentimplementsOnInit,OnDestroy{
publicform:
FormGroup;//表单对象
publicshowLoading=false;
publicmessageTips:
string;
publiclogin_subscribe:
any;
//Validators的写法注意事项
//v2.x版本这样的写法是可行的，v4有调整，不然不会生效
//'UserName':
'',[Vpose（[Validators.minLength（6）]
//v4+,第一位的''代表这个元素初始化构建为空值,类似未输入状态
//'UserName':
['',Vpose（[Validators.minLength（6）]
//Validators可选参数
//1.required：
必须验证的，返回布尔值
//2.minLength：
最小长度
//3.maxLenght:
最大长度
//4.nullValidator:
空值判断
//5.coompose:
多重判断组合，下面有写法
//6.pattern是支持正则模式，正则谨记转义转义转义
constructor（privatefb:
FormBuilder,privaterouter:
Router,privateaccount:
AccountService）{
this.form=fb.group（{
'UserName':
['',Vpose（[Validators.minLength（6）||Validators.pattern（'（0|86|17951）?
（-）?
1[3,4,5,7,8,9]\\d{9}'）||Validators.pattern（'[\\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+（\\.[a-zA-Z0-9_-]+）+'）]）],
'PassWord':
['',Vpose（[Validators.required,Validators.pattern（'\\w{8,16}'）]）],
'rememberAccount':
['']
}）;
}
ngOnInit（）{
}
//登录事件
onSubmit（e）{
this.showLoading=true;
this.login_subscribe=this.account.login（e.value）.subscribe（（res）=>{
console.log（'省略。
。
。
。
。
。
'）
},（err）=>{
this.showLoading=false;
}）;
}
ngOnDestroy（）{
if（this.login_subscribe）{
this.login_subscribe.unsubscribe（）;
}
}
}
效果图
嵌套表单
有些时候我们接口数据层次不可能只有一层，出现两层三层都有可能；
这时候需要我们构建一个嵌套表单。
。
。
html
v2-的写法：
表单的取值可以用controls直接点出来
form.controls.RuleContent.controls.FenceName.invalid&&form.controls.RuleContent.controls.FenceName.value,'has-success':
form.controls.RuleContent.controls.FenceName.valid&&form.controls.RuleContent.controls.FenceName.value}">
速度栅栏名称
不超过十个字
form.controls.RuleContent.controls.MaxSpeed.invalid&&form.controls.RuleContent.controls.MaxSpeed.value,'has-success':
form.controls.RuleContent.controls.MaxSpeed.valid&&form.controls.RuleContent.controls.MaxSpeed.value}">
速度阈值
km/h
保存
取消
v4+的写法:
嵌套表单的取值必须用.get（）来获取，不然会报错误，具体原因是api改动了，看下官方文档就知道，改动了挺多（不仅仅这块）
form.get（'RuleContent.FenceName'）.invalid&&form.get（'RuleContent.FenceName'）.value,'has-success':
form.get（'RuleContent.FenceName'）.valid&&form.get（'RuleContent.FenceName'）.value}">
速度栅栏名称
不超过十个字
form.get（'RuleContent.MaxSpeed'）.invalid&&form.get（'RuleContent.MaxSpeed'）.value,'has-success':
form.get（'RuleContent.MaxSpeed'）.valid&&form.get（'RuleContent.MaxSpeed'）ue}">
速度阈值
km/h
保存
取消
components.ts
import{Component,OnInit}from'@angular/core';
import{Router,ActivatedRoute}from'@angular/router';
import{FormGroup,FormControl,Validators,FormBuilder}from'@angular/forms';//
展开阅读全文
相关搜索
升级会员 