Angular开发(八)-关于表单的基本认识

说明:在

angular

中表单会默认使用交给

angular

去处理，对于传统表单中写的

action

或者

method

都不生效了，如果不想交给

angular

处理就要在表单中加入

ngNoForm

属性

一、不使用

form

标签的情况下

<div>
<p>
<input type="text" minlength="3" maxlength="6" required [(ngModel)]="formdata.username" name="username"/>
<span [hidden]="username2.valid || username2.pristine">你输入有错误</span>
</p>
<p>
<input type="radio" [(ngModel)]="formdata.sex" name="sex" value="男" />男
<input type="radio" [(ngModel)]="formdata.sex" name="sex" value="女" />女
</p>
<p>
<select name="selectoption" [(ngModel)]="interest" (ngModelChange)="change($event)">
<option *ngFor="let item of interests" [ngValue]="item.value">{{item.display}}</option>
</select>
</p>
<!--使用局部模板变量时时显示输入数据-->
<p>{{username2.value}}</p>
</div>

//ts文件
interests: any[] = [
{value: "guangdong", display: "广东"},
{value: "jiangxi", display: "江西"},
{value: "hunan", display: "湖南"}
];
interest: any;
hobby: boolean = true;

change(event: any) {
console.log(event);
}

二、使用

form

标签的时候就可以使用表单提交方法

ngSubmit

提交数据

说明:

1、必须要写

name

属性，

angular

会根据

name

来设置输出对象的

key

2、每个表单中必须要加入

ngModel

属性，如果要进行初始化值的时候就要用到双向绑定

[(ngModel)]="sex"

<form #firstrForm="ngForm" (ngSubmit)="firstForm(firstrForm.value)">
<p>
<input type="text" minlength="3" maxlength="6" required ngModel name="username" #username2="ngModel"/>
<span [hidden]="username2.valid || username2.pristine">你输入有错误</span>
</p>
<p>
<input type="radio" ngModel name="sex" value="男" />男
<input type="radio" ngModel name="sex" value="女" />女
</p>
<p>
<select name="selectoption" ngModel (ngModelChange)="change($event)">
<option *ngFor="let item of interests" [ngValue]="item.value">{{item.display}}</option>
</select>
</p>
<p>
<input type="submit" value="提交" />
</p>
<p>你输入的信息:{{firstrForm.value|json}}</p>
<p>{{username2.value}}</p>
</form>
//ts代码跟上面的一样的

三、使用

ngModelGroup

来包裹几个属性

<div ngModelGroup="pwd">
<p>
<input type="password" name="psw1"
cbb9
ngModel placeholder="请输入密码"/>
</p>
<p>
<input type="password" name="psw2" ngModel placeholder="请输入密码"/>
</p>
</div>

输出效果

四、表单的状态

1、ngForm会追踪整个表单控件的状态

2、ngModel会追踪其所在表单控件的状态(在控件上

#name1="ngModel"

)

状态	true/false
valid	表单值是否有效
pristine	表单值是否未改变
dirty	表单值是否已改变
touched	表单是否已经被访问
untouched	表单是否未被访问

五、表单中常见的事件

事件名称	描述
input	输入框都可以使用的，可以传递参数获取输入框的值
ngSubmit	表单提交方法
ngModelChange	下拉框改变