表單處理
模板式表單
表單數據模型是通過組件中的相關指令來定義的桨螺，因為使用這種方式來定義數據模型時，我們會受限于HTMl的語法，所以模板驅動方式的值適用于簡單的場景
ngForm指令
ngForm代表整個表單，angular會把帶有form標簽的表單隱式的添加，接管表單的處理锣杂，隱式創(chuàng)建了一個formGroup類的實例，存儲表單的數據模型
實例：
<form #myform="ngForm" (ngSubmit)="onsubmit(myform.value)">
<div>用戶名<input ngModel name="username" type="text"></div>
<div>手機號<input ngModel name="tel" type="text"></div>
<div ngModelGroup="password">
<div>密碼<input ngModel name="password" type="password"></div>
<div>確認密碼<input ngModel name="pconfig" type="password"></div>
<button type="submit"></button>
</div>
</form>
<div>
{{myform.value | json}}
</div>
////瀏覽器控制臺打印
Object {username: "ll", tel: "00", password: Object}
password
:
Object
tel
:
"00"
username
:
"ll"
__proto__
:
Object
響應式表單
需要引入ReactiveFormsModule
通過TS代碼來創(chuàng)建底層的數據模型番宁，在這個模型定義好之后元莫，使用這些特定的指令，模板上的HTML元素與底層的數據模型鏈接在一起
創(chuàng)建響應式表單一共需要兩步：
第一：
myHero= new FormGroup({
name: new FormControl()
})
第二
<h2>Hero Detail</h2>
<h3><i>Just a FormControl</i></h3>
<form [formGroup]="myHero" novalidate>
<label class="center-block">Name:
<input class="form-control" formControlName="name">
</label>
</form>
{{myHero.value | json}}
顯示
{name ：null}
FormBuilder
- 明確把heroForm屬性的類型聲明為FormGroup
- 把FormBuilder注入到構造函數中蝶押。
- 添加一個名叫createForm的新方法踱蠢，它會用FormBuilder來定義heroForm。
- 在構造函數中調用createForm
export class HeroDetailComponent3 {
heroForm: FormGroup; // <--- heroForm is of type FormGroup
constructor(private fb: FormBuilder) { // <--- inject FormBuilder
this.createForm();
}
createForm() {
this.heroForm = this.fb.group({
name: '', // <--- the FormControl called "name"
});
}
}
name 屬性可以為一個數組，第一個為參數為初始值茎截，第二個為驗證器
name: ['', Validators.required ]
<p>Form status: {{ heroForm.status | json }}</p>
查看FormControl屬性
| 屬性 | 說明 |
|---|---|
| myControl.value | FormControl的值苇侵。 |
| myControl.status | FormControl的有效性∑笮浚可能的值有VALID榆浓、INVALID、PENDING或DISABLED撕攒。 |
| myControl.pristine | 如果用戶尚未改變過這個控件的值陡鹃，則為true。它總是與myControl.dirty相反抖坪。 |
| myControl.untouched | 如果用戶尚未進入這個HTML控件萍鲸，也沒有觸發(fā)過它的blur（失去焦點）事件，則為true擦俐。 它是myControl.touched的反義詞脊阴。 |
可以使用.get()方法來提取表單中一個單獨FormControl的狀態(tài)。 我們可以在組件類中這么做蚯瞧，或者通過往模板中添加下列代碼來把它顯示在頁面中嘿期，就添加在{{form.value | json}}插值表達式的緊后面：
<p>Name value: {{ heroForm.get('name').value }}</p>
第一步：編碼來創(chuàng)建數據模型
- FormControl
userName: FormControl = new FormControl('aaa');帶的參數就是與之綁定表單組件的初始值 - FormGroup 既可以代表表單的一部分，也可以代表整個表單埋合，是多個Formcontrol集合
formModel: FormGroup = new FormGroup({
from: new FormControl(),
to: new FormControl()
})
- FormArray 沒有key秽五，只能通過index訪問
eamils: FormArray = new FormArray([
new FormControl('a@q.com'),
new FormControl('b@b.com')
]);
