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的更多相关文章

  1. Angular:Reactive Form的使用方法和自定义验证器

    本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...

  2. [Angular] Custom directive Form validator

    Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...

  3. Angular写一个Form组件-TagInput

    前端开发少不了和表单打交道; Angular中, 提供了强大的表单的支持, 响应式表单(Reactive Form) 和 模板驱动的表单(Template-driven Form) 的双向数据流给我们 ...

  4. angular $http 与form表单的select-->refine

    <!DOCTYPE html> <html ng-app="a2_15"> <head> <meta http-equiv="C ...

  5. angular $http 与form表单的select

    产品线 产品 版本 代码是联动关系 ng-model 绑定数据 设置默认值 ng-options 填充option ng-change 选项变化时的操作截图如下: html <!DOCTYPE ...

  6. Angular之【form提交问题】

    前端页面是这样: <form class="form-horizontal" role="form" name="LoginForm" ...

  7. 使用angular.js获取form表单中的信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. [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 ...

  9. [Angular Form] ngModel and ngModelChange

    When using Radio button for Tamplate driven form, we want to change to the value change and preform ...

随机推荐

  1. 泛型? extents super

    ?可以接受任何泛型集合,但是不能编辑集合值.所以一般只在方法参数中用 例子: ? extends Number  则类型只能是Number类的子孙类 ? super String  则类型只能是Str ...

  2. jQuery api 学习笔记(1)

      之前自己的jquery知识库一直停留在1.4的版本,而目前jquery的版本已经更新到了1.10.2了,前天看到1.10中css()竟然扩充了那么多用法,这2天就迫不及待的更新一下自己的jquer ...

  3. 五分钟看懂js关键字this

    this是js里面很常用的关键字,而灵活的js也赋予了这个关键字无穷的生命力,相信你也有被它糊弄的时候,我总结了一个6字原则,大部分场合都能清醒分辨this到底指向who,跟大家分享一下,欢迎指正. ...

  4. PHP与MYSQL配合完成IP的存取

    如何存储IP 程序设计要在功能实现的基础上最大限度的优化性能.而数据库设计是程序设计中不可忽略的重要部分,巧存IP地址可以一定程度提升性能. 利用函数算法处理 MySQL没有直接提供IP类型字段,但有 ...

  5. 未能加载文件或程序集XXX或它的某一个依赖项。试图加载格式不正确的程序。

    今天发布网站时,老是弹出下面这样一个错误. 经过一番折腾终于找到答案: 方法一: 在IIS中设置, 属性 ——常规—— 启用32位应用程序 修改为True. 方法二: 修改项目属性——生成——目标平台 ...

  6. Node.js事件循环

    Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...

  7. Oracle开始从Java运行时中移除JAR包

    早在2012年8月,在Java平台首席架构师Mark Reinhold宣布模块化项目Jigsaw之后不久,JEP 162这一题为“准备模块化”的提案就指出,在Jigsaw项目中为模块化系统开发的代码不 ...

  8. struts2的action访问servlet API的三种方法

    学IT技术,就是要学习... 今天无聊看看struts2,发现struts2的action访问servlet API的三种方法: 1.Struts2提供的ActionContext类 Object g ...

  9. 「Poetize4」上帝造题的七分钟2

    描述 Description "第一分钟,X说,要有数列,于是便给定了一个正整数数列.第二分钟,L说,要能修改,于是便有了对一段数中每个数都开平方(下取整)的操作.第三分钟,k说,要能查询, ...

  10. -_-#【JS】isFinite

    /** * isFinite(number) * 检查是否是无穷大 * 如果 number 是有限数字(或可转换为有限数字),那么返回 true * 如果 number 是 NaN(非数字),或者是正 ...