angular2 form
来源:互联网 发布:淘宝钻展怎么弄啊 编辑:程序博客网 时间:2024/06/05 08:05
<form (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 pow of powers" [value]="pow">{{pow}}</option>
</select>
<div [hidden]="power.valid || power.pristine" class="alert alert-danger">
Power is required
</div>
</div>
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
<i>with</i> reset
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
<i>without</i> reset
<!-- NOT SHOWN IN DOCS -->
<div>
<hr>
Name via form.controls = {{showFormControls(heroForm)}}
</div>
<!-- - -->
</form>
<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 pow of powers" [value]="pow">{{pow}}</option>
</select>
<div [hidden]="power.valid || power.pristine" class="alert alert-danger">
Power is required
</div>
</div>
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
<i>with</i> reset
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
<i>without</i> reset
<!-- NOT SHOWN IN DOCS -->
<div>
<hr>
Name via form.controls = {{showFormControls(heroForm)}}
</div>
<!-- - -->
</form>
阅读全文
0 0
- angular2 form
- angular2 之 form表单
- Angular2 表单form
- Angular2 之 Form 表单
- Angular2 gotchas: Double binding within Form
- angular2
- angular2
- Angular2
- angular2
- angular2 post以“application/x-www-form-urlencoded”形式传参的解决办法
- 错误angular2 Error: If ngModel is used within a form tag...
- Angular2错误收集一:加了form表单,没有给输入表单加name属性
- 【Angular2】新建Angular2项目
- angular2中standalone=“true”和Name attribute must be set if ngModel is used within a form的问题
- Angular2 进阶
- Why Angular2
- Angular2 Routing
- angular2 Displaying
- Python工具类
- C语言-将1到9这九个数字分成三个3位数,要求第一个3位数,正好是第二个3位数的1/2,是第三个3位数的1/3。问应当怎样分,编写程序实现。
- c# sspi authentication
- 基于Lua的游戏服务端框架简介
- 02 JS-DOM之--js的加载和window onload
- angular2 form
- 自定义c++线程池
- /Proc/详解
- Quartus II的使用方法:以暑期硬件作业为例
- 进度条(shell)
- Calendar日历类和GregorianCalendar公历类的使用
- mysql 使用sum()函数时的一个小坑
- while 死循环
- Oracle快速入门002