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. Tomcat虚拟主机配置

    3.1.配置虚拟主机 配置虚似主机就是配置一个网站. 在Tomcat服务器配置一个虚拟主机(网站),需要修改conf文件夹下的server.xml这个配置文件,使用Host元素进行配置,打开serve ...

  2. jQuery Tools:Web开发必备的 jQuery UI 库

    基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...

  3. 七天学会SALTSTACK自动化运维 (3)

    七天学会SALTSTACK自动化运维 (3) 导读 SLS TOP.SLS MINION选择器 SLS文件的编译 总结 参考链接 导读 SLS SLS (aka SaLt State file) 是 ...

  4. 十月例题F题 - City Game

    F - City Game Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Bob is a st ...

  5. vim操作命令-笔记

    显示行号:在vim命令行模式下输入 :set nu 或 :set number 取消显示行号:在vim命令行模式下输入 :set nonu 或 :set nonumber 查看文件编码格式: :set ...

  6. run_command函数分析

    一.概述 位置:common/main.c 功能:根据传入参数(命令),在命令存储区(.u_boot_cmd)中查找对应的命令,找到命令并调用对应的函数执行 流程: 二.分析 1.函数说明信息 /** ...

  7. python中对文件、文件夹的操作需要涉及到os模块和shutil模块。

    创建文件:1) os.mknod("test.txt") 创建空文件2) open("test.txt",w) 直接打开一个文件,如果文件不存在则创建文件 创建 ...

  8. Python的subprocess模块

    尝试在Python中运行可执行文件,网上给出的解决方案是: import os os.system("此处填程序路径") 我要运行的程序文件名中有空格,因此果断失败了,查看了一下帮 ...

  9. 用它解决大问题啦,STRACE应用

    脚本是沙沙,辉哥和我在去年解决一个PHP时弄出来的...强! 简单而实用. 抓到的TRC文件放在TRC目录下. 如果有异常的进程或输出,可以在里面详细的分析.. #!/bin/bash mkdir t ...

  10. svn图形客户端:smartsvn,svnmanager,rapidsvn,svnworkbench,rabbitsvn,Esvn, trac

    svn图形客户端: smartsvn,http://www.oschina.net/p/smartsvn, 不用安装直接运行 qsvn, http://www.oschina.net/p/qsvn r ...