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