构造函数里注入了一个 FormBuilder:

创建一个 FormGroup 实例,名称为 mode,包含一个 deliveryModeId 属性,并且需要进行 Angular react form 默认的 validation 逻辑:

在 Component 模板文件里,通过 formControlName “deliveryModeId” 同这个 form group 实例创建关联关系。

这里 mode 后面的 code completion list,是从第17行的 let mode 变量带出来的。

当我们直接访问 delivery mode 页面,input 控件尚未渲染完毕时:

http://localhost:4299/electronics-spa/en/USD/checkout/delivery-mode

下列代码会返回 true:

get deliveryModeInvalid(): boolean {const flag = this.mode.controls['deliveryModeId'].invalid;console.log('Jerry delivery mode invalid: ', flag);return flag;}

一旦 input 控件渲染完毕后,这个 invalid 标志位再也不可能回到 true 的状态了:

更多Jerry的原创文章,尽在:“汪子熙”:

SAP 电商云 Spartacus UI Delivery Mode ID 的 validator相关推荐

  1. SAP 电商云 Spartacus UI delivery mode 页面设计的结构分析

    deveop 分支: 总的来说分为两个模板,分别对应非 4.2.2 和 4.2.2 版本. 我们细看 4.2.2 版本,这个版本只有一个 spinner: 解决双 spinner 问题: checko ...

  2. SAP 电商云 Spartacus UI 产品搜索结果的设计明细

    我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...

  3. Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

    关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...

  4. SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数

    为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...

  5. SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改

    我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...

  6. 在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合

    先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...

  7. SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子

    如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...

  8. SAP 电商云 Spartacus UI Quick Order 主页的实现

    存货单位(英語:stock keeping unit,SKU/ˌɛsˌkeɪˈjuː/),也翻译为库存单元,是一個會計學名詞,定义为库存管理中的最小可用单元,例如纺织品中一个SKU通常表示规格.颜色. ...

  9. SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理

    从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计 我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应 ...

最新文章

  1. 大疆车载招聘|SLAM、地图定位、感知算法、机器学习算法工程师
  2. 根据两点间的经纬度计算距离
  3. php 计算字符串相邻最大重复数_php如何解决字符串中重复字符的次数并且排序输出的方法...
  4. MVC基于角色权限控制--菜单展示
  5. 【快乐水题】1816. 截断句子
  6. 关于进程与线程,史上最浅显易懂的一个简单解释!
  7. z-index的学习整理转述
  8. Tensorflow模型加载与保存、Tensorboard简单使用
  9. python—高阶函数
  10. greendao3.0版本更新 新增字段遇到的问题
  11. mybatis 3的TypeHandler深入解析(及null值的处理)
  12. 《深入理解java虚拟机》 精华总结
  13. 十六进制转二进制原理
  14. Excel 批量删除自定义名称
  15. 使用JavaScript克隆元素
  16. 鼠标悬停显示禁用图标
  17. 计算机输入输出接口形式,输入输出接口-微计算机原理-电子发烧友网站
  18. css炫酷标题,分享几个CSS小众但炫酷的技巧
  19. DRM(一):什么是DRM
  20. 河北安格计算机专修学院简介,石家庄那23家院校被取消办学资格?

热门文章

  1. 为了30分钟配送,盒马工程师都有哪些“神操作”?
  2. 【全记录】2017云栖大会·北京峰会——企业云上业务优化专场
  3. 学数据结构,仅仅须要主要的编程体验
  4. [转] C# TextBox、DataGrideView中的数据绑定
  5. 编写高质量代码:改善Java程序的151个建议(第3章:类、对象及方法___建议36~40)
  6. 为甚么 国企做互联网总做不起来?
  7. 磁盘阵列常见故障以及维护注意事项
  8. 1.4 面向对象的基本概念
  9. 微信小程序项目实战知识点总结(swiper组件自适应高度,自定义弹出层,悬浮按钮,虚拟键盘)...
  10. 2018.09.16模拟总结