首页 > 代码库 > angular2表单初体验

angular2表单初体验

2024-09-10 00:04:52   215人阅读

1.创建movie模型。

最近对angular2比较感兴趣，跟着官网学习一段，练习了一个表单demo！

src/app/movie.ts文件：

export class Movie{        constructor(        public id:number,        public name:string,        public age : string,        public hobby?:string            ){}}

 

2.创建表单组件。

src/app/movie-form.component.ts文件：

import {Component} from ‘@angular/core‘;import { Movie } from ‘./movie‘;@Component({    moduleId:module.id,    selector:‘movie-form‘,    templateUrl:‘./movie-form.component.html‘})export class MovieFormComponent{    introduce = [‘小城之春‘, ‘音乐之城‘,            ‘疯狂原始人‘, ‘里约大冒险‘];        model = new Movie(18,‘July yu‘,this.introduce[0],‘惊天魔盗团故事‘);        submitted = false;        onSubmit(){                this.submitted = true;    }            get disgnostic(){          return  JSON.stringify(this.model);      }    newMovie() {      this.model = new Movie(42, ‘‘, ‘‘);    }}

 

3.定义应用的根模块。

src/app/app.module.ts文件：

import { NgModule }      from ‘@angular/core‘;import { BrowserModule } from ‘@angular/platform-browser‘;import { FormsModule }   from ‘@angular/forms‘;import { AppComponent }  from ‘./app.component‘;import { MovieFormComponent } from ‘./movie-form.component‘;@NgModule({  imports:      [ BrowserModule , FormsModule],  declarations: [ AppComponent , MovieFormComponent],  bootstrap:    [ AppComponent ]})export class AppModule { }

 

4.创建根组件。

src/app/app.component.ts文件：

import { Component } from ‘@angular/core‘;@Component({  selector: ‘my-app‘,  template: ‘<movie-form></movie-form>‘})export class AppComponent { }

 

5.创建表单模板。

src/app/movie-form.component.html文件：

<div class="container">    <div [hidden]="submitted">        <h1>Movie Form</h1>        <form (ngSubmit)="onSubmit()" #movieForm="ngForm">            <div class="form-group">                <label for="name">Name</label>                <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel">                <div [hidden]="name.valid || name.pristine" class="alert alert-danger">                    Name is required                </div>            </div>            <div class="form-group">                <label for="hobby">Alter hobby</label>                <input type="text" class="form-control" id="hobby" [(ngModel)]="model.hobby" name="hobby">            </div>            <div class="form-group">                <label for="intro">Movie introduce</label>                <select class="form-control" id="intro" required [(ngModel)]="model.introduce" name="intro" #intro="ngModel">                    <option *ngFor="let i of introduce" [value]="i">{{i}}</option>                </select>                <div [hidden]="intro.valid || intro.pristine" class="alert alert-danger">                    Power is required                </div>            </div>            <button type="submit" class="btn btn-success" [disabled]="!movieForm.form.valid">Submit</button>            <button type="button" class="btn btn-default" (click)="newMovie(); movieForm.reset()">New Movie</button>        </form>    </div>    <div [hidden]="!submitted">        <h2>You submitted the following:</h2>        <div class="row">            <div class="col-xs-3">Name</div>            <div class="col-xs-9  pull-left">{{ model.name }}</div>        </div>        <div class="row">            <div class="col-xs-3">Alter hobby</div>            <div class="col-xs-9 pull-left">{{ model.hobby }}</div>        </div>        <div class="row">            <div class="col-xs-3">introduce</div>            <div class="col-xs-9 pull-left">{{ model.introduce }}</div>        </div>        <br>        <button class="btn btn-primary" (click)="submitted=false">Edit</button>    </div></div>

 

angular2表单初体验


联系
我们