Angular2.js--form (TOP)

Forms Create an effective, compelling data entry experience. The angular form coordinates a set of Data-bound controls to track Changes. Validates the validity of the input and displays an error message.

next, The main contents are:

1, the use of components and templates to build angular forms;

2. Create a data binding with Ngmodel to read and write the value of the input Control.

Build a angular form

We want to build a form with three fields of name, phone number, and special Features.

1, we can refer to the Quick launch of the article, to create a new project called forms, You can also use the previous project to modify;

2, Create the person class;

3. Create a component that controls this form;

4, create a template with the initial form layout;

5. Use the Ngmodel bidirectional data binding syntax to bind data properties to each form Control.

Create Person class

Create a hero.ts file under the app folder with the content

Export Class person{    constructor (public        id:number, public        name:string, public        ownpower:string, Public        Power?: string  // can be filled with optional  ? cannot be omitted     ) {}}// Create a class that defines its properties

The typescript compiler generates a common field for each public constructor parameter that automatically assigns parameters to these public fields when a new person instance is Created.

Create a form component

Create a hero-form-component.ts file under the app Folder:

Import {Component} from ' @angular/core '; import {person} from'./hero ';//introducing the person class in Hero.ts@Component ({moduleId:module.id,//the form.html Property sets the base address that is used to load the template file from a relative pathSelector: ' Hero-form ',//Create add Templateurl: '. /form.html '//add content to form.html on the template}) Export class Heroformcomponent {powers=[' singing ', ' dancing ', ' playing the piano ', ' drawing ']; Model=NewPerson (1, ' Xiao Ming ', ' dancing ', this. powers[2]);//instantiation ofSubmitted=false; OnSubmit () { this. submitted=true;} Get diagnostic () {returnJson.stringify ( this. model);}//This is for the moment .}

1. This code imports the angular core library and the person model we just created;

2, @Component Adorner selector will

3, ModuleId:module.id Property Set the base address, used to load the Templateurl from the relative module path;

4, the Templateurl attribute points to a separate HTML template file, using an external template;

5. The bit model and powers provide false data for demonstration purposes;

6. At the end of the Add diagnostic attribute, She returns the JSON form of the Model. Used for debugging during the development process.

Modify the App.module.ts startup file

Import {ngmodule} from ' @angular/core '; import {browsermodule} from' @angular/platform-browser '; import {formsmodule} from' @angular/forms ';//Import FormImport {AppComponent1} from './app.component '; import{heroformcomponent} from'./hero-form.component ';//Import the newly added component class//import heroformcomponent in Hero-form.component.ts@NgModule ({imports: [browsermodule, formsmodule//form template],declarations: [AppComponent1, heroformcomponent//class name],bootstrap: [AppComponent1]}) Export class Appmodule {}

1, Import Formsmodule and new components heroformcomponent;

2. Add Formmodule to the Imports list of the Ngmodel adorner so that the application can access all the features of the Template-driven form, including ngmodel;

3 HeroFormComponent . Add the list to the ngModule adorner so that the declarations HeroFormComponent component is visible throughout the Module.

Modify the App.component.ts file

Import {Component} from ' @angular/core '; @Component ({    ' My-app ',/// Create add in index.html < My-app> label    / package     template: ' // template Add this tag (content inside Hero-form)}) Export class appcomponent1{} 

The build template for the form is Finished.

Create an initial HTML form template , the form.html file mentioned above

<! DOCTYPE html> for= "name" > Name </label> <input type= "text" id= "name" required class= "form-control" > &LT;/DIV&G        T <div class= "form-group" > <label for= "ownpower" > Features </label> <input type= "text" class= "form-control" id= "ownpower" > </div&gt        ; <div class= "form-group" > <label for= "power" > Capability Selection </label> <select class= "form-control" id= "power" required> <!--loop --<option *ngfor= "let pow of powers" [value]= "pow" >{{pow}}</option> </select > </div> <button type= "submit" class= "btn btn-success" > Submit </button> </form>< /div></body>
We can use CSS to beautify the form and introduce style sheet files into the Index.html.
<!--style sheet--    <link rel= "stylesheet" href= "css/bootstrap.min.css" >
The effect shown is
 bidirectional data binding [(ngModel)] syntax with Ngmodel
Modify the form.html file, take the name to make an instance
<div class= "form-group" >            for = "name" > name, displayed as {{model.name}}</label>            <input type= "text" id= "name" required class= "form-control" [(ngmodel)]= "model.name" name= "name" #name1 = "ngmodel" >            <!-- Two-way binding:{{model.name}}-->            <!--use ngmodwl for two-way binding, which binds model.name, so all have model. Name can be changed at the same time-        </div>
Effect is
well, a simple form is done, the next one to control the form, check errors and other Content.
Reference: https://angular.cn/docs/ts/latest/guide/forms.html
Angular2.js--form (TOP)