AngularJS表单用法详细指南

2021年3月12日14:01:00 发表评论 1,226 次浏览

表单是控件的集合, 这些控件是输入字段, 按钮, 复选框, 这些可以是

已验证

即时的。表单的用户完成填写字段并移至下一个字段时

得到验证并向用户建议他可能出了错的地方。

因此, 一个表单可以由许多控件组成

但是, 我们将专注于

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

输入字段：

语法如下：

< input type = "text" value = "name" ng-model = "name" placeholder = "name" >

可以添加各种约束以进行必要的验证, 我们也可以使用place-

持有人为用户方便而预定义输入框, 以便该表单具有

错误, 而不是用户不必重新输入正确的详细信息。

Inapp.module.ts

import { FormsModule } from '@angular/forms';

在开头的导入列表中, 并在以下内容中添加Formsmodule：

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 >

要使用输入框中写的值, 我们通过两种方式将其存储在变量中。

输出如下：

复选框并选择(下拉菜单)：

以某种形式, 在ngModel中定义的变量在被选择为false时存储为true。

在"选择"中, 所选值将存储在ngModel中定义的变量中。

范例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 >

输出如下

单选按钮和按钮

表单中使用的单选按钮一次只能选择一个字段, 以确保这是

在这种情况下, 我们应该仅将其与ngModel关联。

Example＃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 >

在此代码中, 仅在选择单选按钮之一之后, 该按钮才可见。但是, 一旦你选择它, 它就不会显示, 因为当你选择它时, 触摸的字段(至少被选中一次)变为

true, 但是如果预加载了条件, 则不会反映在按钮中。

因此, 仅当我们单击屏幕上的任意位置或更改选择时, 此按钮才可见。

选择之前：