AngularJS表单用法详细指南 _AngularJS

表单是控件的集合, 这些控件是输入字段, 按钮, 复选框, 这些可以是
已验证
即时的。表单的用户完成填写字段并移至下一个字段时
得到验证并向用户建议他可能出了错的地方。
因此, 一个表单可以由许多控件组成
但是, 我们将专注于

输入框
复选框
单选框
按钮
选择框(下拉列表)

1)
输入字段：
语法如下：

< input type = "text" value = "https://www.lsbin.com/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 >

输出如下

文章图片
【AngularJS表单用法详细指南】单选按钮和按钮
表单中使用的单选按钮一次只能选择一个字段, 以确保这是
在这种情况下, 我们应该仅将其与ngModel关联。
Example＃3(单选按钮)：
In
app.component.html

< form > < p > Select a radio button to know which Vowel it is associated to:< / p > < input value = "https://www.lsbin.com/A" type = "radio" ngModel name = "myVar" # myVar = "ngModel" > < input value = "https://www.lsbin.com/E" type = "radio" ngModel name = "myVar" # myVar = "ngModel" > < input value = "https://www.lsbin.com/I" type = "radio" ngModel name = "myVar" # myVar = "ngModel" > < input value = "https://www.lsbin.com/O" type = "radio" ngModel name = "myVar" # myVar = "ngModel" > < input value = "https://www.lsbin.com/U" type = "radio" ngModel name = "myVar" # myVar = "ngModel" > < br /> < button * ngIf = 'myVar.touched' > Submit< / button > < / form > < p > You have selected: {{myVar.value}}< / p >

在此代码中, 仅在选择单选按钮之一之后, 该按钮才可见。但是, 一旦你选择它, 它就不会显示, 因为当你选择它时, 触摸的字段(至少被选中一次)变为
true, 但是如果预加载了条件, 则不会反映在按钮中。
因此, 仅当我们单击屏幕上的任意位置或更改选择时, 此按钮才可见。
选择之前：