6.1 NgForm 表单指令 - RLwu/angular-start GitHub Wiki

NgForm - 表单指令

NgForm指令为表单元素/form建立一个控件组对象，作为控件的容器； 而NgControlName指令为则为宿主input元素建立一个控件对象，并将该控件加入到NgForm 指令建立的控件组中：

form

局部变量

通过使用#符号，我们创建了一个引用控件组对象（注意，不是form元素！）的局部变量f。 这个变量最大的作用是：它的value属性是一个简单的JSON对象，键对应于input元素的 ng-control属性，值对应于input元素的值：

form

声明指令依赖

NgForm指令和NgControlName指令都包含在预定义的数组变量FORM_DIRECTIVES中，所以我们在 组件注解的directives属性中直接声明FORM_DIRECTIVES就可以在模板中直接使用这些指令了：

//angular2/src/common/forms/directives.ts
export const FORM_DIRECTIVES: Type[] = CONST_EXPR([
  NgControlName,
  NgControlGroup,
 
  NgFormControl,
  NgModel,
  NgFormModel,
  NgForm,
 
  NgSelectOption,
  DefaultValueAccessor,
  NumberValueAccessor,
  CheckboxControlValueAccessor,
  SelectControlValueAccessor,
  NgControlStatus,
 
  RequiredValidator,
  MinLengthValidator,
  MaxLengthValidator
]);

例子

  • html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>NgForm</title>
</head>
<body>
	<ez-app><img src="img/wait.gif"></ez-app>
    <script type="text/javascript" src="lib/angular2.beta.stack.min.js"></script>
</body>
</html>
  • ts
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {CORE_DIRECTIVES,FORM_DIRECTIVES} from "angular2/common";

//EzApp组件
@Component({
	selector:"ez-app",
	directives:[FORM_DIRECTIVES,CORE_DIRECTIVES],
	template:`
		<form #f="ngForm" (submit)="search(f.value)">
			<select>
				<option value="web">网页</option>
				<option value="news">新闻</option>
				<option value="image">图片</option>
			</select>
			<input type="text" ngControl="kw">
			<button type="submit">搜索</button>
		</form>
		<!--给个简单的反馈-->
		<h1 *ngIf="kw!=''">正在搜索 {{kw}} ...</h1>
	`,
	styles:[`form{background:#90a4ae;padding:5px;}`]            
})
class EzApp{
	constructor(){
		this.kw = "";
	}
	search(val){
		this.kw = val.kw;
		//假装在搜索，2秒钟返回
		setTimeout(()=>this.kw="",2000);
	}
}

bootstrap(EzApp);
⚠️ **GitHub.com Fallback** ⚠️