AngularJS Form表单

作者 : 慕源网 本文共1854个字,预计阅读时间需要5分钟 发布时间: 2022-04-29 共375人阅读

AngularJS 表单,表单是输入字段、按钮、复选框等控件的集合,这些控件可以进行实时验证。只要表单的用户写完一个字段并移动到下一个字段,得到验证并提示用户可能出错的地方。一个表单可以由许多控件组成。

  1. 文本框
  2. 复选框
  3. 单选框
  4. 按钮
  5. 选择框(下拉菜单)

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>

在此代码中,该按钮仅在选择其中一个单选按钮后才可见。

选择前:

选择后:

我们可以向所有输入类型添加验证,并使表单具有响应性。


慕源网 » AngularJS Form表单

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录