AngularJS Form表单
AngularJS 表单,表单是输入字段、按钮、复选框等控件的集合,这些控件可以进行实时验证。只要表单的用户写完一个字段并移动到下一个字段,得到验证并提示用户可能出错的地方。一个表单可以由许多控件组成。
- 文本框
- 复选框
- 单选框
- 按钮
- 选择框(下拉菜单)
1)文本框:
语法:
<input type="text" value="name" ng-model="name" placeholder="name">
可以添加各种约束来进行验证,我们也可以使用placeholder描述输入字段预期值的提示信息,方便用户输入正确的信息。
app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
FormsModule,
],
在创建表单时需要添加引用。
示例 #1:
app.component.html
<form>
<div class="form-group">
<label for="firstName">Name</label>
<input type="text"
id="firstName"
placeholder="Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="text"
id="email"
placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Password">
</div>
<div class="form-group">
<label for="phone">mobile</label>
<input
type="text"
id="phone"
ngModel name="phone"
#phone="ngModel"
placeholder="Mobile">
</div>
</form>
<p>{{ phone.value }}</p>
我们通过双向绑定将输入框中写入的值存储在一个变量中,方便使用。
输出:
示例#2 复选框:
app.component.html
<form>
<input id="myVar" type="checkbox" ngModel name="myVar" #myVar="ngModel">
<p>The checkbox is selected: {{myVar.value}}</p>
<br />
<select ngModel name="mychoice" #myChoice="ngModel">
<option>A</option>
<option>E</option>
<option>I</option>
<option>O</option>
<option>U</option>
</select>
<p>The selected option from Dropdown {{ myChoice.value }}</p>
</form>
输出
示例 #3(单选按钮):
app.component.html
<form>
<p>Select a radio button to know which Vowel it is associated to:</p>
<input value="A" type="radio" ngModel name="myVar" #myVar="ngModel">
<input value="E" type="radio" ngModel name="myVar" #myVar="ngModel">
<input value="I" type="radio" ngModel name="myVar" #myVar="ngModel">
<input value="O" type="radio" ngModel name="myVar" #myVar="ngModel">
<input value="U" type="radio" ngModel name="myVar" #myVar="ngModel">
<br/><button *ngIf='myVar.touched'>Submit</button>
</form>
<p>You have selected: {{myVar.value}}</p>
在此代码中,该按钮仅在选择其中一个单选按钮后才可见。
选择前:
选择后:
我们可以向所有输入类型添加验证,并使表单具有响应性。
常见问题FAQ
- 程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
- 请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!