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

一、angular表单提供的两种构建表单的方式

• 1、模板驱动-采用表单内置指令，内置的校验方式
• 2、模型驱动-采用自定义表单，自定义校验方式

二、模板局部变量的认识

在DOM元素上在变量前面加上一个#表示模板局部变量，类似传统的javascript中的document.getElementById

<input type="text" #name1 id="name1" />
<input type="button" value="提交" (click)="get(name1)" />

get(name1:any){
    console.log(name1);
    console.log(name1.value);
    console.log(name1.id);
}

三、angular表单的模板驱动几大指令

• 1、ngForm是控制整个form表单的
• 2、ngModel是表单数据绑定所在点
• 3、ngModelGroup是表单中分组的，常用于密码或者地址

使用方式

• 1、ngForm的使用方式直接写在form表单上赋值给模板局部变量<form #myForm="ngForm"></form>
• 2、ngModel的使用分两种情况
  
  • 如果要进行双向绑定就使用双向绑定的规范:[(ngModle)]="xxx"
  • 如果仅仅是根据ngForm获取表单的值那么就可以直接在表单中使用ngModle 就可以

使用案例

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form #myForm="ngForm" (ngSubmit)="doSubmit(myForm)">
                <div class="form-group">
                    <label>用户名:</label>
                    <input type="text" class="form-control" name="username" placeholder="请输入用户名" [(ngModel)]="myform.username" />
                </div>
                <fieldset ngModelGroup="passwordGroup">
                    <div class="form-group">
                        <label>输入密码:</label>
                        <input type="password" class="form-control" [(ngModel)]="myform.first" name="password" placeholder="请输入密码" />
                    </div>
                    <div class="form-group">
                        <label>确认密码:</label>
                        <input type="password" class="form-control" [(ngModel)]="myform.last" name="repeatpassword" placeholder="请确认密码" />
                    </div>
                </fieldset>
                <div class="form-group">
                    <label>选择性别:</label>
                    <div class="radio">
                        <label>
                            <input type="radio" name="sex" value="男" [(ngModel)]="myform.sex"/>男
                        </label>
                        <label>
                            <input type="radio" name="sex" value="女" [(ngModel)]="myform.sex"/>女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>请选择省份:</label>
                    <select name="province" ngModel class="form-control">
                        <option *ngFor="let item of myform.province" value="{{item.value}}">{{item.display}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>请选择省份:</label>
                    <select name="province1" ngModel class="form-control">
                        <option *ngFor="let item of myform.province" [ngValue]="item">{{item.display}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>是否记住密码:</label>
                    <div class="checkbox">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="isSave" [(ngModel)]="myform.isSave" value=""/>是 
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="提交" />
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <div>{{myForm.value | json:"2"}}</div>
        </div>
    </div>
</div>

    ....
    myform:any = {
        username:"张三",
        sex:"男",
        isSave:true,
        first:"",
        last:"",
        province:[
          {value:"0",display:"广东省"},
          {value:"1",display:"广西省"},
          {value:"2",display:"湖南省"},
          {value:"3",display:"福建省"}
        ]
    }
    constructor() { }

    ngOnInit() {
    }
    //提交表单数据
    doSubmit(myForm:any){
        console.log(myForm.value);
    }

四、表单的状态

状态	说明	备注
valid	表单值是否有效
pristine	表单值是否未改变
dirty	表单值是否已改变
touched	表单是否已经被访问
untouched	表单是否未被访问过

五、angular表单中内置的表单校验有

规则	描述	说明
required	必填字段
minlength	最小长度
maxlength	最大长度
pattern	自己写正则

六、angular表单中内置的样式

状态	为true的时候的css类	为false的时候的css类
控件已经被访问了	ng-touched	ng-untouched
控件值已经发生改变	ng-dirty	ng-pristine
控件值是否有效	ng-valid	ng-invalid

<div class="form-group">
    <label>用户名:</label>
    <input type="text" class="form-control" #username="ngModel" name="username" placeholder="请输入用户名" [(ngModel)]="myform.username" required minlength=3 maxlength=6/>
    <p [hidden]="username.valid || username.pristine" class="text-danger">用户名输入有误</p>
</div>

.ng-valid[name]{
    border:1px solid #360;
}
.ng-invalid[name]{
    border:1px solid #f00;
}
.ng-untouched[name]{
    border:1px solid #ddd;
}

七、项目案例下载地址