专栏首页Jerry的SAP技术分享Angular FormBuilder的工作原理

Angular FormBuilder的工作原理

Cart view里的form控件:

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
  <div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="address">
      Address
    </label>
    <input id="address" type="text" formControlName="address">
  </div>
  <button class="button" type="submit">Purchase</button>

</form>

最后生成的html page:

如果Component的模板实现里,form的属性formGroup,即中括号属性后面的值checkoutForm2实际上不存在,那么在页面渲染之前会报错:ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何使用Angular FormBuilder

    (1) 在app.module.ts里,引入ReactiveFormsModule:

    Jerry Wang
  • 一个Java快速排序实现的调试

    Jerry Wang
  • SAP云平台上部署应用时遇到disk quota不够的问题

    tar: Ideps/bin/yarmpkg: Cannot createsymlink to..yarn/yarn-v1.19.1/bin/yarnpkgDi...

    Jerry Wang
  • jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ——————————————————————学习目录———————————————————— 1.概念 2.特点 ...

    王小雷
  • bootstrap carousel 轮播

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • forEach循环实现卡片列表

    王小婷
  • BBS论坛(十九)

    zhang_derek
  • 列表

    达达前端
  • Vue有什么特性,相对于其他框架都有那些优势!

    Vue所提供的一些相对高级的特性,表单操作,自定义指令,计算属性,过滤器,侦听器,生命周期。

    达达前端
  • 关于Web语义化的意义

    随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

    NateHuang

扫码关注云+社区

领取腾讯云代金券