发表于： 2019-11-07 20:44:04
1 909
今天完成的事情：
优化angular 任务的 代码
每天整理angualr学习的知识点
验证表单重构(进行中)
做路由守卫（进行中）
看老大直播学习方法(进行中)
整理下css常用代码
明天计划的事情：
整理下路由守卫，第一点它的理解运行方式，第二点理解它是通过什么执行，
写复盘TTP
准备下前面做完的所有任务的知识点
遇到的问题：
无
收获：
| 线索Cues | 笔记Notes |
表单项 nz-form-item | 表单项用于区分表单中不同的区域，包含表单域和表单标签(可选)。 这个你就当做是一个大的DIV把里面的各种表单包含在里面，就相当于大盒子来改变位置存在的 |
表单标签 nz-form-label | 用于标示当前表单项的内容，可选。 代码如下 <nz-form-label [nzSpan]="5">标题</nz-form-label> 这就相当于你创意一个DIV在输入框前面专门写一写输入框需要输入的名称 比如户名啊， 密码啊 |
| [nzSpan] | 这个就相当于 padding margin 来调节间距的 |
表单域 nz-form-control | 表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等 代码如下 <nz-form-control nzValidateStatus [nzSpan]="12" nzErrorTip="请填写名称"> <input nz-input [(ngModel)]="article.title" maxlength="18" placeholder="标题名称" name='title' required /> </nz-form-control> 可以理解为 专门来判断输入宽的状态而且这里是专门写一些UI表单验证的一些方法的。 效果如下   |
| 表单类容 | |
| nzValidateStatus | 会根据传入的 FormControl 或 NgModel 自动生成校验状态，也可以直接指定状态，不传入时默认值为 nz-form-control 中包裹的第一个 FormControl 或 NgModel 如解释那样个是专门进行判断输入框里面的值的这状态你写没写。当然也你可以给一种状态API上面有. |
angualr文档 表单文档 | 这里需要当我表单没有全部输入完成那么我得让它的点击按钮不能点击 |
| #heroForm="ngForm" | 你已经定义了一个模板引用变量 #heroForm，并且把赋值为“ngForm”。 现在，就可以在“Submit”按钮中访问这个表单了。 你要把表单的总体有效性通过 heroForm 变量绑定到此按钮的 disabled 属性上，这里要注意下 前面# name 这个是可以随意起名字的不是固定写法. 后面是命名赋值特殊语句固定写法. 代码 <form #Form="ngForm"> 你要把表单的总体有效性通过 heroForm 变量绑定到此按钮的 disabled 属性上，代码如下： <button nz-button nzType="primary" [disabled]="! heroForm.form.valid || article.img[0] == undefined" (click)="click()">上线</button> [disabled] 里面的判断就是当FORM表单验证失败的时候不允许点击按钮,也就是说heroForm.form.valid 这句话代表这表单验证失败，后面的是图片验证就是图片验证不能为未定义否则点击按钮不能点击 效果   效果如上当你的表单没填写完成是不能点击按钮 |
| 总结Summary | |
首先要了解如有应用UI组件库 知道区分表单中不同区域包含表单域表单标签知道他们是干什么的，要知道原生表单验证怎么写，要知道模版变量是干什么的这些都需要重点了解的知识点，虽然这个点击按钮只用了2个代码但里面包含的知识点特别多，那是因为上一个笔记我知道验证表单原生如何写法，而这个是UI组件表单验证外加原生的写法要知道哪些是UI组件自带的哪些是angular文档的. | |
返回列表
评论