angularjs2 表单

<!DOCTYPE html>
<html>
<head>
    <title>Hero Form</title>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet"
          href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="forms.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.17?main=browser"></script>
    <script src="https://unpkg.com/reflect-Metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
<my-app>Loading...</my-app>
</body>

</html>

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';
import { HeroFormComponent } from './hero-form.component';

@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],declarations: [
        AppComponent,HeroFormComponent
    ],bootstrap: [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',template: '<hero-form></hero-form>'
})
export class AppComponent { }

/**
 * Created by dell on 2016/9/13.
 */
import { Component } from '@angular/core';

import { Hero }    from './hero';

@Component({
    selector: 'hero-form',templateUrl: 'app/hero-form.component.html'
})
export class HeroFormComponent {
    powers = ['Really Smart','Super Flexible','Super Hot','Weather Changer'];

    model = new Hero(18,'Dr IQ',this.powers[0],'Chuck Overstreet');
    submitted = false;
    onSubmit() { this.submitted = true; }
    active = true;
    newHero() {
        this.model = new Hero(42,'','');
        this.active = true;
    }
    showFormControls(form: any) {
        return form && form.controls['name'] &&
            form.controls['name'].value;
    }
}

<div class="container">

    <div  [hidden]="submitted">
        <h1>Hero Form</h1>
        <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="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="alterEgo">Alter Ego</label>
                <input type="text" class="form-control" id="alterEgo"
                       [(ngModel)]="model.alterEgo" name="alterEgo" >
            </div>
            <div class="form-group">
                <label for="power">Hero Power</label>
                <select class="form-control" id="power"
                        required
                        [(ngModel)]="model.power" name="power"
                        #power="ngModel" >
                    <option *ngFor="let p of powers" [value]="p">{{p}}</option>
                </select>
                <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
                    Power is required
                </div>
            </div>
            <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
            <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
            <div>
                <hr>
                Name via form.controls = {{showFormControls(heroForm)}}
            </div>
        </form>
    </div>

    <div [hidden]="!submitted">
        <h2>提交的form数据记录:</h2>
        <div class="row">
            <div class="col-xs-9  pull-left">{{ model.name }}</div>
        </div>
        <div class="row">
            <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
        </div>
        <div class="row">
            <div class="col-xs-9 pull-left">{{ model.power }}</div>
        </div>
        <br>
        <button class="btn btn-default" (click)="submitted=false">Edit</button>
    </div>
</div>

export class Hero {

    constructor(
        public id: number,public name: string,public power: string,public alterEgo?: string
    ) {  }

}

.ng-valid[required],.ng-valid.required  {
    border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
    border-left: 5px solid #a94442; /* red */
}

/**
 * PLUNKER VERSION
 * (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',typescriptOptions: {
            tsconfig: true
        },Meta: {
            'typescript': {
                "exports": "ts"
            }
        },paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },// map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',// angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',// other libraries
            'rxjs':                       'npm:rxjs','angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api','ts':                         'npm:plugin-typescript@4.0.10/lib/plugin.js','typescript':                 'npm:typescript@1.9.0-dev.20160409/lib/typescript.js',},// packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.ts',defaultExtension: 'ts'
            },rxjs: {
                defaultExtension: 'js'
            },'angular2-in-memory-web-api': {
                main: './index.js',defaultExtension: 'js'
            }
        }
    });
})(this);

{
  "compilerOptions": {
    "target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": true,"suppressImplicitAnyIndexErrors": true
  }
}

/* Master Styles */
h1 {
    color: #369;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 250%;
}
h2,h3 {
    color: #444;
    font-family: Arial,sans-serif;
    font-weight: lighter;
}
body {
    margin: 2em;
}
body,input[text],button {
    color: #888;
    font-family: Cambria,Georgia;
}
a {
    cursor: pointer;
    cursor: hand;
}
button {
    font-family: Arial;
    background-color: #eee;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    cursor: hand;
}
button:hover {
    background-color: #cfd8dc;
}
button:disabled {
    background-color: #eee;
    color: #aaa;
    cursor: auto;
}

/* Navigation link styles */
nav a {
    padding: 5px 10px;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    background-color: #eee;
    border-radius: 4px;
}
nav a:visited,a:link {
    color: #607D8B;
}
nav a:hover {
    color: #039be5;
    background-color: #CFD8DC;
}
nav a.active {
    color: #039be5;
}

/* items class */
.items {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 24em;
}
.items li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
}
.items li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
}
.items li.selected:hover {
    background-color: #BBD8DC;
    color: white;
}
.items .text {
    position: relative;
    top: -3px;
}
.items {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 24em;
}
.items li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
}
.items li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
}
.items li.selected {
    background-color: #CFD8DC;
    color: white;
}

.items li.selected:hover {
    background-color: #BBD8DC;
}
.items .text {
    position: relative;
    top: -3px;
}
.items .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0 0.7em;
    background-color: #607D8B;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 1.8em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
    font-family: Arial,sans-serif;
}

原文链接：https://www.f2er.com/angularjs/148859.html

猜你在找的Angularjs相关文章