angular4更改表单中显示的值_angular4 Form表单相关
ng4中，有兩種方式去聲明一個表單
一：Template-Driven Forms - 模板驅動式表單? ?[引入FormsModule]
1.ngForm賦值[可以方便的獲取表單的值]
name='username'
[(ngModel)]='login.username'
required>
Name is required.
2.ngModel綁定[ngModel會自動關聯表單控件name屬性，并使用該值作為ngForm對象的屬性名]
以下有三種寫法：
3.ngModel賦值[可以操縱表單控件的事件]
name='username'
[(ngModel)]='login.username'
#username='ngModel'(change)='changeName(username.value)'required>
Name is required.
4.驗證規則相關[required/minlength/maxlength等]
The minlength is8.5.驗證狀態相關[touched/valid/invalid/pristine/dirty/untouched等]
valid：控件有效
invalid：控件無效
pristine：控件值未改變
dirty：控件值已改變
untouched：表單控件未被訪問過
...
[disabled]='f.invalid'
(click)='onSubmit(f)'>
submit
二：Reactive Forms (Model-Driven Forms) - 響應式表單? [引入ReactiveFormsModule]
1.FormGroup(FormControl+FormArray)[表單對象]
FormGroup：包含一組FormControl和FormArray的實例，可用于跟蹤一組實例的值和驗證狀態
FormControl & FormArray：為單個表單控件提供支持的類，用于跟蹤控件的值和驗證狀態 前者是單值類型，后者是多值類型
2.Validators[表單驗證]
//html方面
*ngIf="thatForm.get('name').hasError('required') &&
thatForm.get('name').touched">
Name is required
*ngIf="thatForm.get('name').hasError('minlength') &&
thatForm.get('name').touched">
The minlength is 2.
//xx.component.ts
export class xxComponent implements OnInit{
thatForm: FormGroup;
constructor(){};
ngOnInit() { this.thatForm=new FormGroup({
name:new FormGroup('',[Validators.required,Validators.minLength(2)])
})
}
}
3.FormBuilder[簡化新建FormGroup對象整個過程]
//FormGroup用法
export class xxComponent implements OnInit{
thatForm: FormGroup;
constructor(){};
ngOnInit() {this.thatForm=new FormGroup({ name:new FormGroup('',[Validators.required,Validators.minLength(2)])
})
}
}
//FormBuilder用法
export class xxComponent implements OnInit{
thatForm: FormGroup;
constructor(private formBuilder: FormBuilder){};
ngOnInit() {this.thatForm=this.formBuilder.group({
name:['',[Validator.required,Validators.minLength(2)]]
})
}
}
4.FormValidation[統一管理驗證錯誤]
//html方面
{{formValidation.msgs.name.errors}}//form-validation.ts
export class xxValidation extends FormValidation{
constructor(){
super()
}
msgs={
name:{
errors:'',
messages:{
required:'please type the name.',
minlength:'please enter 3 charactors atleast.'}
}
}
}
//xx.component.ts
export class xxComponent implements OnInit{
formValidation:xxValidation=newxxValidation();
thatForm:FormGroup;
constructor(private formBuilder: FormBuilder){}
ngOnInit(){ this.thatForm=this.formBuilder.group({
name:['',[Validators.required,Validators.minLength(4)]]
})
}
}
兩種方式的比較：
模板驅動表單(Template-Driven Forms)
1.使用方便
2.適用于簡單的場景
3.通過[(ngModel)]實現數據雙向綁定
4.最小化組件類的代碼
5.不利于單元測試
響應式表單(Reactive Forms)
1.比較靈活
2.適用于復雜的場景
3.簡化了HTML模板的代碼，把驗證邏輯抽離出來了
4.方便跟蹤表單控件值的變化
5.易于單元測試
總結
以上是生活随笔為你收集整理的angular4更改表单中显示的值_angular4 Form表单相关的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 北京笔记本电脑租赁(北京笔记本电脑租赁的
- 下一篇： js截取url问号前面_js截取url问