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文件

 1 <form #myForm="ngForm" (ngSubmit)="creatUser(myForm.value)">   
 2         <!-- // #myForm="ngForm" 模板本地變量引入ngForm指令 -->
 3         <div>姓名：<input type="text" #myName="ngModel" ngModel name="myname"></div>       
 4         <div>郵箱：<input type="email" ngModel name="email"></div>
 5         <div>手機號：<input type="number" ngModel name="mobile"></div>
 6         <div ngModelGroup="passwordInfo">
 7             <div>密碼：<input type="password" ngModel name="password"></div>
 8             <div>確認密碼：<input type="password" ngModel name="passwordConfirm"></div>
 9         </div>
10         <button tyoe="submit">註冊</button>
11     </form>
12     <!-- // 模板本地變量引入ngForm -->
13     <div>
14         {{myForm.value | json}} 
15     </div>
16     <!-- // 模板本地變量引入ngModel -->
17     <div>
18         {{myName

html

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>

html

 

 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);
    }

ts