[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 ...
随机推荐
- Tomcat虚拟主机配置
3.1.配置虚拟主机 配置虚似主机就是配置一个网站. 在Tomcat服务器配置一个虚拟主机(网站),需要修改conf文件夹下的server.xml这个配置文件,使用Host元素进行配置,打开serve ...
- jQuery Tools:Web开发必备的 jQuery UI 库
基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...
- 七天学会SALTSTACK自动化运维 (3)
七天学会SALTSTACK自动化运维 (3) 导读 SLS TOP.SLS MINION选择器 SLS文件的编译 总结 参考链接 导读 SLS SLS (aka SaLt State file) 是 ...
- 十月例题F题 - City Game
F - City Game Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Bob is a st ...
- vim操作命令-笔记
显示行号:在vim命令行模式下输入 :set nu 或 :set number 取消显示行号:在vim命令行模式下输入 :set nonu 或 :set nonumber 查看文件编码格式: :set ...
- run_command函数分析
一.概述 位置:common/main.c 功能:根据传入参数(命令),在命令存储区(.u_boot_cmd)中查找对应的命令,找到命令并调用对应的函数执行 流程: 二.分析 1.函数说明信息 /** ...
- python中对文件、文件夹的操作需要涉及到os模块和shutil模块。
创建文件:1) os.mknod("test.txt") 创建空文件2) open("test.txt",w) 直接打开一个文件,如果文件不存在则创建文件 创建 ...
- Python的subprocess模块
尝试在Python中运行可执行文件,网上给出的解决方案是: import os os.system("此处填程序路径") 我要运行的程序文件名中有空格,因此果断失败了,查看了一下帮 ...
- 用它解决大问题啦,STRACE应用
脚本是沙沙,辉哥和我在去年解决一个PHP时弄出来的...强! 简单而实用. 抓到的TRC文件放在TRC目录下. 如果有异常的进程或输出,可以在里面详细的分析.. #!/bin/bash mkdir t ...
- svn图形客户端:smartsvn,svnmanager,rapidsvn,svnworkbench,rabbitsvn,Esvn, trac
svn图形客户端: smartsvn,http://www.oschina.net/p/smartsvn, 不用安装直接运行 qsvn, http://www.oschina.net/p/qsvn r ...