极客angular知识分享（6）-- 模板表单

2019-04-13 21:36发布

站内文章 / 模拟电子
17053 0 1419

基于模板的表单

定义
在模板中定义表单以及验证细节
基本表单
product={}; addName(){ console.log(this.product); } ※使用[(ngModel)]必须引入模块@angular/forms中的FormsModule模块 表单验证
  1. angular 内置验证属性
    required 指定必填的数据
    minlength 指定最小字符数
    maxlength 指定最大字符数。不能直接应用于表单元素，因为与同名的html5属性冲突。它可以与基于模型的表单一起使用
    pattern 指定用户填充的值必须符合正则表达式
  2. 限制
    angular要求验证元素必须定义name属性
    必须存在form元素时，angular验证功能才起作用
    form中添加了novalidate属性，浏览器才知道不会使用原生的验证功能
  3. 表单提交
    form的ngSubmit事件表单
    button的click事件提交表单
  4. 示例代码
验证类样式化元素
  1. ng-touched（是） ng-untouched（否）
    元素是否被用户访问
  2. ng-pristine（否） ng-dirty（是）
    元素的内容是否被改变（改变后又恢复原值，还会保留在ng-dirty）
  3. ng-valid（是） ng-unvalid（否）
    元素的内容是否符合验证的所有规则
input.ng-dirty.ng-valid{ border:2px solid green; } input.ng-dirty.ng-invalid{ border:2px solid red; } input.ng-touched.ng-invalid{ border:2px solid red; } 域级验证消息
  1. ngModel可以用来访问宿主元素的验证状态
  2. 模板引用变量获取宿主元素的ngModel
  3. 模板引用变量属性
    path 元素的名称
    valid 为true 有效
    invalid 为true 无效
    pristine 未更改
    dirty 更改
    touched 访问元素
    untouched 未访问元素
    errors 返回一个对象，它的每个属性代表一个验证错误
    value 返回元素的值，用于自定义验证规则
※ 可以使用安全导航防止属性为null 如：username.errors?.required
?代表如果errors为null或undefined则不尝试访问它的属性
  1. errors的属性
    required required属性被用于input元素时返回为true
    minlength.requiredLength 满足minlength规则所需要的字符
    minlength.actualLength 用户输入的字符数
    pattern.requiredPattern 使用pattern属性指定的正则表达式
    pattern.actualValue 返回元素的内容
  • 请输入用户名！
  • 用户名不能少于5个字符
  • 只能使用字符和空格
使用组件显示验证消息 oproduct={}; getValidateMsg(state:any, tingName?:string){ let tring = state.path || tingName; let msg = [] if(state.errors){ for (let error in state.errors) { switch (error) { case "required": msg.push(`You must enter a ${tring}`); break; case "minlength": msg.push(`至少：${state.errors['minlength'].requiredLength}`); break; default: break; } } } return msg; }
  • {{error}}
验证整个form
  1. 组件进入NgForm指令，并赋值给模板引用变量
  2. 将form以实参传入
  3. form.valid true 代表验证通过，否则说明有问题
  4. form.reset() 可以重置表单为最初未访问状态
有问题！
禁用提交按钮
在提交或表单数据无效时，表单按钮应该设置为禁用
[disabled]="formSubmited && myform.invalid"

热门文章