发表于： 2019-11-05 18:59:03
1 891
今天完成的事情：
明天计划的事情：
由于表单是原生angular写的 我用的是UI组件 明天重构
遇到的问题：
无
收获：
| 线索 | 笔记 |
| import { ReactiveFormsModule } from '@angular/forms'; | 首先如果你想要用这个UI组件需要先引进一个模块ReactiveFormsModule 模块，刚开始由于不太清楚直接引入组件出现报错，结果看了angular表单说需要引进响应式表单。 文档解释是提供一种模型驱动方式法来处理其值随时间变化的表单输入 |
报错信息 Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. 机械翻译 错误提示:如果ngModel在表单标签中使用，则必须设置name属性或表单 控件必须在ngModelOptions中定义为“独立” | 代码 class="nameInput" nz-input [(ngModel)]="article.content" placeholder="说明" name="content" 大概意思就是如果你在from表达里面要使用双向数据绑定是吧， 就必须要加一给name 或这id 否则就会报错,这给上网查了下大佬回答好像是因为本身就是Bug原因自身设计问题，反正如果你在输入框还是下拉框有双向数据邦迪的话，就必须要加name属性 或者id 属性 否则会出现报错. |
通过 ngModel 跟踪修改状态与有效性验证 | .png)  大概意思就是通过双向绑定跟踪来获取表达的数值状况 上面给图 表示的是你这给双向数据绑定会为邦迪元素提供一些特别的类名就上面这3给，
|
| #（模板引用变量） | NgModel 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。 可以利用这些 CSS 类来修改控件的外观，显示或隐藏消息。 然后通过 src/app/hero-form/hero-form.component.html (excerpt) <input type="text" class="form-control" id="name" required #spy><br>TODO: remove this: {{spy.className}} 这就是#后面名字随便起，这样你在页面渲染出来的就是上面哪给图片所表现的CSS类 来监视如图  这里注意我点击后 后面的NG改变  |
| 警告框 | 笔记 |
显示和隐藏验证错误信息 | 通过模板引用变量来实现 代码如下 <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel"> <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div> 通过模板引用变量的值来进行检查输入框的值是否有效 如图  |
| 总结 | |
| 让加深了解到原生angular的写发 而知道ngModel 自带的属性可以通过模板引入变量来实现验证表单。（由于这给原生angular写的的我用UI组件实现不了明天重新通过UI组件来实现 按钮点击和不能点击的功能） | |
返回列表
评论