表单是控件的集合, 这些控件是输入字段, 按钮, 复选框, 这些可以是
已验证
即时的。表单的用户完成填写字段并移至下一个字段时
得到验证并向用户建议他可能出了错的地方。
因此, 一个表单可以由许多控件组成
但是, 我们将专注于
1)
输入字段:
语法如下:
< input type = "text" value = "name" ng-model = "name" placeholder = "name" >
可以添加各种约束以进行必要的验证, 我们也可以使用place-
持有人为用户方便而预定义输入框, 以便该表单具有
错误, 而不是用户不必重新输入正确的详细信息。
Inapp.module.ts
import { FormsModule } from '@angular/forms';
在开头的导入列表中, 并在以下内容中添加Formsmodule:
imports: [
BrowserModule, FormsModule, ],
创建表单时, 请始终包含以上代码。
范例1:
In
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 >
要使用输入框中写的值, 我们通过两种方式将其存储在变量中。
输出如下:
复选框并选择(下拉菜单):
以某种形式, 在ngModel中定义的变量在被选择为false时存储为true。
在"选择"中, 所选值将存储在ngModel中定义的变量中。
范例2:
In
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 >
输出如下
单选按钮和按钮
表单中使用的单选按钮一次只能选择一个字段, 以确保这是
在这种情况下, 我们应该仅将其与ngModel关联。
Example#3(单选按钮):
In
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 >
在此代码中, 仅在选择单选按钮之一之后, 该按钮才可见。但是, 一旦你选择它, 它就不会显示, 因为当你选择它时, 触摸的字段(至少被选中一次)变为
true, 但是如果预加载了条件, 则不会反映在按钮中。
因此, 仅当我们单击屏幕上的任意位置或更改选择时, 此按钮才可见。
选择之前:
选择之后:
我们可以添加验证所有这些输入类型, 并使我们的表单具有响应能力。