angular表单处理

 划重点：

模板式表单

1.引入FormsModule模块；2.html中绑定表单指令:重点词汇ngForm、ngModel、ngModel name

<form #myForm="ngForm" (ngSubmit)="createUser(myForm.value)">

<input type="text" #myName="ngModel" ngModel name="myname">

</form>

 <div>
     {{myForm.value | json}}  // 模板本地变量引入ngForm
 </div>

响应试表单

1.引入FormsModule、ReactiveFormsModule模块；2.html中绑定表单指令[formGroup]、formControlName、formArrayName、formGroup；

 <form [formGroup]="formModel" (submit)="createUser()"> 

  <div>姓名：<input type="text" formControlName="nickname"></div>

</form>
3.ts中

 private formModel: FormGroup;
 private fb: FormBuilder = new FormBuilder();
constructor(){
this,formModel=this.fb.group({
name:['']
});
}

一.模版式表单

ngForm作用：

a.ngForm指令可以发现所有标有‘ngModel’的子元素，并将其值添加到表单模型中创建FormGroup的实例，将数据存储在ngForm.value对象中。

b.当不希望Angular接管表单时，可以给表单标签添加“ngNoForm”指令。

c.会阻止表单的提交刷新，使用ngSubmit事件来提交；

 

ngModel作用：

a.ngModel是ngForm指令所在元素的子元素的字段，与name属性相关联（仅当添加name属性时才会捕获，创建数据模版

b.用来将联系的表单元素放置于一块，并组成对象格式数据，代码示例

1.指令来自FormsModule模块，app.module.ts中引入

 

import { FormsModule } from '@angular/forms';

并声明

@NgModule({

declarations: [],

imports: [FormsModule],

providers: [],

})

2.html文件

<form #myForm="ngForm" (ngSubmit)="creatUser(myForm.value)">   
        <!-- // #myForm="ngForm" 模板本地变量引入ngForm指令 -->
        <div>姓名：<input type="text" #myName="ngModel" ngModel name="myname"></div>       
        <div>邮箱：<input type="email" ngModel name="email"></div>
        <div>手机号：<input type="number" ngModel name="mobile"></div>
        <div ngModelGroup="passwordInfo">
            <div>密码：<input type="password" ngModel name="password"></div>
            <div>确认密码：<input type="password" ngModel name="passwordConfirm"></div>
        </div>
        <button tyoe="submit">注册</button>
    </form>
    <!-- // 模板本地变量引入ngForm -->
    <div>
        {{myForm.value | json}} 
    </div>
    <!-- // 模板本地变量引入ngModel -->
    <div>
        {{myName

createUser(info:any){
console.log(info);
}

二.响应式表单

使用响应式，必须引入FormsModule、ReactiveFormsModule这两模块

 

<form [formGroup]="formModel" (submit)="createUser()">//绑定表单
  <div>姓名:<input type="text" formControlName="nikeName"></div>//绑定单个字段
  <div>手机:<input type="number" formControlName="mobile"></div>
  <div>邮箱:
    <ul formArrayName="emails">//绑定数组类型
      <li *ngfor="let email of formModel.get('emails')controls;let i=index;">
        <input [formControlName]='i'> //数组没有key值，且i为变量，所以采用属性绑定法
      </li>
    </ul>
    <button type="button" (click)="addEmail()">增加email</button>
  </div>

  <div formGroupName="passworldInfo">  //绑定先关联的字段组合
    <div>密码:<input type="passwor" formControlName="passworldInfo"></div>
    <div>确认密码:<input type="password" forControlName="passworldConfirm"></div>
    
  </div>
   <button type="submit">注册</button>
</form>

 

 private formModel: FormGroup;

    private fb: FormBuilder = new FormBuilder();

constructor() {
        this.formModel = this.fb.group({
            nickname: ['hello'],
            mobile: [''],
            emails: this.fb.array([
                ['a@a.com'],
                ['b@b.com']
            ]),
            passwordInfo: this.fb.group({
                password: [''],
                passwordConfirm: ['']
            })
        });
    }

    //绑定方法

    addEmail() {
        let emails = this.formModel.get('emails') as FormArray;  
        emails.push(new FormControl());
        console.log(this.formModel.value);
    }

    createUser() {
        console.log(this.formModel.value);
    }