[Angular 2] A Simple Form in Angular 2
Angular in Form Simple
2023-09-14 09:00:54 时间
When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGroup and Controls.
- Bind [ng-form-model] to the <form>
- form bind to ControlGoup
- Bind [ng-form-control] to the <input>
- input bind to Gontrol
import {Component, View, FORM_DIRECTIVES, ControlGroup, Control} from 'angular2/angular2'; @Component({ selector: 'field-form' }) @View({ directives: [FORM_DIRECTIVES], template: ` <form [ng-form-model]="johnform"> Title: <input type="checkbox" ng-control="title"> Action: <input type="checkbox" ng-control="action"> </form> ` }) export class FieldForm { johnform = new ControlGroup({ title: new Control(true), action: new Control(true) }); get selectedField(){
// return ['title', 'action'] return Object.keys(this.johnform.controls) .filter((key)=>{ return this.johnform.controls[key].value; }) } }
----------------------
import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2'; import {TodoService} from './todoService'; import {TodoItemRender} from './todoItemRender'; import {StartsWith} from './startsWith'; import {SimpleSearch} from './simpleSearch'; import {LetterSelect} from './letterSelect'; import {TodoSearch} from './todoSearch'; import {FieldForm} from './fieldForm'; @Component({ selector: 'todo-list' }) @View({ pipes: [StartsWith, SimpleSearch], directives: [NgFor, TodoItemRender, FORM_DIRECTIVES, LetterSelect, TodoSearch, FieldForm], template: ` <div> <field-form #field-form></field-form> <todo-search #todo-search></todo-search> {{todoSearch.term}} <todo-item-render *ng-for="#todo of todoService.todos | simpleSearch: fieldForm.selectedField : todoSearch.term" [todoinput]="todo" > </todo-item-render> </div> {{fieldForm.selectedField | json}} ` })
相关文章
- activiti自定义流程之整合(二):使用angular js整合ueditor创建表单
- [Angular] Two things about OnChanges Lifecycle hook
- [Angular] How to get Store state in ngrx Effect
- [Angular] Intercept HTTP requests in Angular
- [Angular] Omit relative path by set up in tsconfig.json
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [Angular2 Form] Style Validation in Angular 2 Forms
- [Angular] Angular Search filter, built-in filters, ng-repeat
- [Angular 14] Providers in Angular Route
- [Angular] The non-null assertion operator ( ! )
- [Angular] Control the dependency lookup with @Host, @Self, @SkipSelf and @Optional
- [Angular] Read Custom HTTP Headers Sent by the Server in Angular
- [Angular] Create a custom validator for template driven forms in Angular
- [Angular] Create a custom validator for reactive forms in Angular
- [Angular] @ContentChildren and QueryList
- [Angular2 Form] Style Validation in Angular 2 Forms
- [Angular 2] Passing Template Input Values to Reducers
- [AngularJS] New in Angular 1.3 - bindToController
- 使用FakeAsync对Angular异步代码进行单元测试
- fragment in UI5 Smart Template and directive in Angular
- Angular 页面元素的DOM级别的删除过程
- Angular应用内路由(In App Route)的最佳实践