[Angular 2] ng-control & ng-control-group
2023-09-14 09:00:54 时间
Control:
Controls encapsulate the field's value, a states such as if it is valid, dirty or has errors.
var nameControl = new Control("Nate"); var name = nameControl.value; // -> Nate nameControl.errors // -> StringMap<string, any> of errors nameControl.dirty // -> false nameControl.valid // -> true
ControlGroup:
A way to manage multiple Controls.
var personInfo = new ControlGroup({ firstName: new Control("Nate"), lastName: new Control("Murray"), zip: new Control('90210') }); personInfo.value; // ->{ //firstName: "Nate", //lastName: "Murray", //zip: "90210" } personInfo.errors // -> StringMap<string, any> of errors personInfo.dirty // -> false personInfo.valid // -> true
import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2'; @Component({ selector: 'demo-form-sku' }) @View({ directives: [FORM_DIRECTIVES], template: ` <div> <h2>Demo Form: Sku</h2> <!-- ngForm is attched to the form, and #f="form" form is also come from ngForm--> <form #f = "form" (submit)="onSubmit(f.value)"> <div class="form-group"> <label for="skuInput">SKU</label> <input type="text" class="form-control" id="skuInput" placeholder="SKU" ng-control="sku"> </div> <button type="submit" class="btn btn-default"> Submit </button> </form> </div> ` }) export class DemoFormSku { constructor() { } onSubmit(value){ console.log(value); } }
相关文章
- 图片上传api——chevereto个人图床搭建&后端发送请求
- From Docker to Kubernetes(三)- Docker Volume&Compose
- 观察者模式 &发布订阅模式
- 解密Prompt系列1. Tunning-Free Prompt:GPT2 & GPT3 & LAMA & AutoPrompt
- react源码解析20.总结&第一章的面试题解答
- 标准&有效的项目开发流程
- Java Number & Math 类
- Mysql学习之路-AND & OR 运算符
- 7 Papers & Radios | 爆火论文打造《西部世界》雏形;OpenAI终结扩散模型
- C++中的类继承之单继承&多继承&菱形继承详解编程语言
- AMP MySQL升级提升数据库性能的必要之举(amp mysql升级)
- 用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦!
- JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染