导入表单模块

import { FormsModule } from '@angular/forms';
// ...
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, UserComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
模板变量语法

<video #player></video>
<button (click)="player.pause()">Pause</button> <video #player></video> ==
<video ref-player></video>示例;
@Component({
selector: 'sl-user',
template: `
...
<div>
<form (submit)="addSkill(skill.value)">
<label>添加技能</label>
<input type="text" #skill>
</form>
</div>
`
})
export class UserComponent {
// ...
  skills: string[];
  constructor() {
this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
}
    addSkill(skill: string) {
let skillStr = skill.trim();
if (this.skills.indexOf(skillStr) === -) {
this.skills.push(skillStr);
}
}
}

angular4-表单的更多相关文章

  1. Angular4 表单处理

  2. angularcli 第五篇(输入框、表单处理)

    本文参考:Angular4 表单快速入门 注:涉及input表单时要在AppComponent中引入 FormsModule模块:     import{ FormsModule } from '@a ...

  3. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  4. Angular4——7.表单处理

    在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...

  5. Angular4笔记——表单状态相关的属性

    表单状态字段(FromControl)touched和untouched用来判断用户是否访问过一个字段(也就是这个字段是否获取过焦点,如果获取过焦点,touched是true,untouched是fa ...

  6. angular4 form表单验证

    <!-- novalidate 清除浏览器默认的校验行为 --> <form [formGroup]="formModel" (ngSubmit)="o ...

  7. angular4 自定义表单验证Validator

    表单的验证条件有时候满足不了需求就可以自定义验证 唯一要求返回是ValidatorFn export interface ValidatorFn{ (c:AbstractControl):Valida ...

  8. angular4 自定义表单组件

    自定义表单组件分为单值组件和多值组件. 单值组件:input/select/radio/textarea 多值组件:checkbox/tree组件 条件: 1.必须实现ControlValueAcce ...

  9. angular4 Form表单相关

    ng4中,有两种方式去声明一个表单 一:Template-Driven Forms - 模板驱动式表单   [引入FormsModule] 1.ngForm赋值 [可以方便的获取表单的值] <f ...

  10. Angular2 表单验证相关

    angular4响应式表单与校验http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1 How to ...

随机推荐

  1. LeetCode--020--括号匹配(java版)

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...

  2. Confluence 6 如何让我的小组成员知道那些内容是重要的

    如果你的 Confluence 中已经有了很多内容,定义那些内容是重要看起是一件艰巨的任务 —— 但是下面的一些特性能够帮助你的小组确定那些内容是他们应该关心的. 我的空间(My Spaces) 添加 ...

  3. 一篇文章一张思维导图看懂Android学习最佳路线(转载)

    Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级.中级.高级以及资深工程师.只针对Android应用开发,不针对Rom开发和逆向工程等.方便起见虚拟“小 ...

  4. 『TensotFlow』RNN中文文本_下_暨研究生开学感想

    承前 接上节代码『TensotFlow』RNN中文文本_上, import numpy as np import tensorflow as tf from collections import Co ...

  5. 关于react16.4——上下文Context

    首先我们来聊一聊(上下文)Context. 上下文(Context) 提供了一种通过组件树传递数据的方法,无需在每个级别手动传递 props 属性. 在典型的 React 应用程序中,数据通过 pro ...

  6. vue 监听store中的数值

      computed: {   isFollow () {     return this.$store.state.demo.id; //需要监听的数据   } }, watch: {   isFo ...

  7. bootstrap fileinput组件的使用

    组件的下载地址为:https://github.com/kartik-v/bootstrap-fileinput 比较详细的介绍可参看:http://www.jq22.com/jquery-info5 ...

  8. java集合的实现细节--ArrayList和LinkedList

     ArrayList和LinkedList的实现差异 List代表一种线性表的数据结构,ArrayList则是一种顺序存储的线性表,ArrayList底层采用动态数组的形式保存每一个集合元素,Link ...

  9. Hive的JDBC

    Hive 的JDBC 包含例子 https://cwiki.apache.org/confluence/display/Hive/HiveClient#HiveClient-JDBC HiveServ ...

  10. Redshift中查看database、schema、table数据大小

    1. 查看当前数据库大小以及记录行数 select trim(pgdb.datname) as database, sum(b.mbytes) as mbytes, sum(a.rows) as ro ...