[Angular 2] The form export from NgFormControl
In last post, we need to create an instanse variable:
sku: AbstructControl;
We can get rid of this by getting the exported form from NgFormControl, what we get is a directive, to get control, we need to call .control:
<div class="form-group" [class.has-error]="!sku.valid && sku.touched">
<label for="skuInput">SKU</label>
<input type="text"
class="form-control"
id="skuInput"
#sku = "form"
placeholder="SKU"
[ng-form-control]="myForm.controls['sku']">
</div>
To use it:
<div *ng-if="!sku.control.valid"
class="bg-warning">SKU is invalid</div>
Notic, this is only available for the control, not for the from, if we do:
<div *ng-if="myForm.control.hasError('required', 'sku')">
SKU is required
</div>
Will cause error.
Code:
import {Component, View, FORM_DIRECTIVES, Validators, FormBuilder, NgIf} from 'angular2/angular2'; @Component({
selector: 'demo-form-sku'
})
@View({
directives: [FORM_DIRECTIVES, NgIf],
template: `
<div>
<h2>Demo Form: Sku</h2>
<!-- ngForm is attched to the form, and #f="form" form is also come from ngForm-->
<form [ng-form-model]="myForm"
(submit)="onSubmit(myForm.value)">
<div class="form-group" [class.has-error]="!sku.valid && sku.touched">
<label for="skuInput">SKU</label>
<input type="text"
class="form-control"
id="skuInput"
#sku = "form"
placeholder="SKU"
[ng-form-control]="myForm.controls['sku']">
</div>
<div *ng-if="!sku.control.valid"
class="bg-warning">SKU is invalid</div>
<button type="submit" class="btn btn-default">Submit
</button>
<div *ng-if="myForm.hasError('required', 'sku')">
SKU is required
</div> </form>
<div *ng-if="!myForm.valid"
class="bg-warning">Form is invalid</div>
</div>
`
}) export class DemoFormSku {
myForm: ControlGroup; //sku: AbstractControl;
constructor(fb:FormBuilder) { this.myForm = fb.group({ "sku": ["", Validators.required] }); this.sku = this.myForm.controls['sku']; } onSubmit(value){ console.log(value); } }
[Angular 2] The form export from NgFormControl的更多相关文章
- Angular:Reactive Form的使用方法和自定义验证器
本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...
- [Angular] Custom directive Form validator
Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...
- Angular写一个Form组件-TagInput
前端开发少不了和表单打交道; Angular中, 提供了强大的表单的支持, 响应式表单(Reactive Form) 和 模板驱动的表单(Template-driven Form) 的双向数据流给我们 ...
- angular $http 与form表单的select-->refine
<!DOCTYPE html> <html ng-app="a2_15"> <head> <meta http-equiv="C ...
- angular $http 与form表单的select
产品线 产品 版本 代码是联动关系 ng-model 绑定数据 设置默认值 ng-options 填充option ng-change 选项变化时的操作截图如下: html <!DOCTYPE ...
- Angular之【form提交问题】
前端页面是这样: <form class="form-horizontal" role="form" name="LoginForm" ...
- 使用angular.js获取form表单中的信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Angular 2] A Simple Form in Angular 2
When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGr ...
- [Angular Form] ngModel and ngModelChange
When using Radio button for Tamplate driven form, we want to change to the value change and preform ...
随机推荐
- 泛型? extents super
?可以接受任何泛型集合,但是不能编辑集合值.所以一般只在方法参数中用 例子: ? extends Number 则类型只能是Number类的子孙类 ? super String 则类型只能是Str ...
- jQuery api 学习笔记(1)
之前自己的jquery知识库一直停留在1.4的版本,而目前jquery的版本已经更新到了1.10.2了,前天看到1.10中css()竟然扩充了那么多用法,这2天就迫不及待的更新一下自己的jquer ...
- 五分钟看懂js关键字this
this是js里面很常用的关键字,而灵活的js也赋予了这个关键字无穷的生命力,相信你也有被它糊弄的时候,我总结了一个6字原则,大部分场合都能清醒分辨this到底指向who,跟大家分享一下,欢迎指正. ...
- PHP与MYSQL配合完成IP的存取
如何存储IP 程序设计要在功能实现的基础上最大限度的优化性能.而数据库设计是程序设计中不可忽略的重要部分,巧存IP地址可以一定程度提升性能. 利用函数算法处理 MySQL没有直接提供IP类型字段,但有 ...
- 未能加载文件或程序集XXX或它的某一个依赖项。试图加载格式不正确的程序。
今天发布网站时,老是弹出下面这样一个错误. 经过一番折腾终于找到答案: 方法一: 在IIS中设置, 属性 ——常规—— 启用32位应用程序 修改为True. 方法二: 修改项目属性——生成——目标平台 ...
- Node.js事件循环
Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...
- Oracle开始从Java运行时中移除JAR包
早在2012年8月,在Java平台首席架构师Mark Reinhold宣布模块化项目Jigsaw之后不久,JEP 162这一题为“准备模块化”的提案就指出,在Jigsaw项目中为模块化系统开发的代码不 ...
- struts2的action访问servlet API的三种方法
学IT技术,就是要学习... 今天无聊看看struts2,发现struts2的action访问servlet API的三种方法: 1.Struts2提供的ActionContext类 Object g ...
- 「Poetize4」上帝造题的七分钟2
描述 Description "第一分钟,X说,要有数列,于是便给定了一个正整数数列.第二分钟,L说,要能修改,于是便有了对一段数中每个数都开平方(下取整)的操作.第三分钟,k说,要能查询, ...
- -_-#【JS】isFinite
/** * isFinite(number) * 检查是否是无穷大 * 如果 number 是有限数字(或可转换为有限数字),那么返回 true * 如果 number 是 NaN(非数字),或者是正 ...