网站首页 » 前端开发 » Angular 2+ » Angular 2+ 表单
上一篇:
下一篇:

Angular 2+ 表单

前言

在平时的开发中,表单吧说是最常用的了,比如内容的发布页面、登陆页面等,所以在 Angular 2+ 中的表单用法我们必需得会。下面就来看看 Angular 表单。

表单之旅

我们直接来看一个例子,通过这个例子把有关表单的一些常用的东西都融合进去,好例子一个就够!

在做之前,我们不妨先看看效果图:

Angular 2+ 表单

app.component.ts
<div class="container">
  <div [hidden]="submitted">
    <h1>My Form</h1>
    <form #myForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" [(ngModel)]="person.name" id="name" required #cName #hName="ngModel">
        <p>{{cName.className}}</p>
        <div [hidden]="hName.valid || (hName.pristine && hName.untouched)" class="alert alert-danger">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="age">Age</label>
        <input type="number" class="form-control" name="age" [(ngModel)]="person.age" id="age" required #cAge #hAge="ngModel">
        <p>{{cAge.className}}</p>
        <div [hidden]="hAge.valid || (hAge.pristine && hAge.untouched)" class="alert alert-danger">
          Age is required
        </div>
      </div>
      <div class="form-group">
        <label for="sex">Sex</label>
        <select class="form-control" id="sex" name="sex" [(ngModel)]="person.sex" required #cSex #hSex="ngModel">
          <option value=""></option>
          <option *ngFor="let sex of sexData" [value]="sex">{{sex}}</option>
        </select>
        <p>{{cSex.className}}</p>
        <div [hidden]="hSex.valid || (hSex.pristine && hSex.untouched)" class="alert alert-danger">
          Sex is required
        </div>
      </div>
      <button type="button" class="btn btn-default" (click)="reset(myForm)">Reset</button>
      <button type="submit" class="btn btn-success" [disabled]="myForm.form.invalid">Submit</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">{{ person.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Age</div>
      <div class="col-xs-9 pull-left">{{ person.age }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Sex</div>
      <div class="col-xs-9 pull-left">{{ person.sex }}</div>
    </div>
    <br>
    <button class="btn btn-primary" (click)="submitted=false">Edit</button>
  </div>
</div>
app.component.css
.ng-valid[required],
.ng-valid.required {
  border-left: 5px solid #42A948;
  /* green */
}

.ng-touched.ng-invalid:not(form),
.ng-dirty.ng-invalid:not(form) {
  border-left: 5px solid #a94442;
  /* red */
}
app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  submitted = false;
  person = {};
  sexData = ['男', '女'];
  onSubmit() {
    this.submitted = true;
  }
  reset(myForm) {
    myForm.reset();
  }
}

这里用到了 boostrap UI 库,如果你想看到美美的页面,就可以在 index.html 中引入 boostrap。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angular-core-knowledge-forms/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END