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:image.png

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

image.png

image.png


相关文章
|
6月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
30 0
|
8月前
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
45 0
|
8月前
|
JavaScript 前端开发
Angular @Injectable 注解的工作原理浅析
Angular @Injectable 注解的工作原理浅析
49 0
|
8月前
|
JavaScript 前端开发 容器
从编译后的代码,分析 Angular @Injectable 的工作原理
从编译后的代码,分析 Angular @Injectable 的工作原理
48 0
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
85 0
|
JavaScript 前端开发
Angular @Injectable 注解的工作原理浅析
Angular @Injectable 注解的工作原理浅析
213 0
Angular @Injectable 注解的工作原理浅析
|
测试技术
Angular jasmine单元测试框架里expect.toHaveBeenCalled的工作原理
Angular jasmine单元测试框架里expect.toHaveBeenCalled的工作原理
56 0
Angular jasmine单元测试框架里expect.toHaveBeenCalled的工作原理
|
调度
Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理
141 0
Angular Effects.ofType的工作原理
通过一个简单的例子学习Angular Injection Token工作原理
通过一个简单的例子学习Angular Injection Token工作原理
通过一个简单的例子学习Angular Injection Token工作原理
|
前端开发 JavaScript
Angular @Hostbinding工作原理
Angular @Hostbinding工作原理
179 0
Angular @Hostbinding工作原理

热门文章

最新文章