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" 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 下拉框改变