重慶分公司 重慶分公司
angular的兩種類型表單是什么
這篇“angular的兩種類型表單是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“angular的兩種類型表單是什么”文章吧。
成都做網(wǎng)站 、成都網(wǎng)站設(shè)計的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián) 多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián) ，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。
在 Angular 中，表單有兩種類型，分別為模板驅(qū)動和模型驅(qū)動。
一、模板驅(qū)動 1.1 概述
表單的控制邏輯寫在組件模板中，適合簡單的表單類型。
1.2 快速上手
1）、引入依賴模塊 FormsModule
import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {} 2）、將 DOM 表單轉(zhuǎn)換為 ngForm
3）、聲明表單字段為 ngModel
提交
4）、獲取表單字段值
import { NgForm } from "@angular/forms"
export class AppComponent {
onSubmit(form: NgForm) {
console.log(form.value) // {username: ''}
}
} 5）、表單分組
提交
import { NgForm } from "@angular/forms"
export class AppComponent {
onSubmit(form: NgForm) {
console.log(form.value) // {contact: {phone: ''}, user:{username: ''}}
}
} 1.3 表單驗證
提交
export class AppComponent {
onSubmit(form: NgForm) {
// 查看表單整體是否驗證通過
console.log(form.valid)
}
}
提交 在組件模板中顯示表單項未通過時的錯誤信息。
請?zhí)顚懹脩裘?/div>
不符合正則規(guī)則
指定表單項未通過驗證時的樣式。
input.ng-touched.ng-invalid {
border: 2px solid red;
} 二、模型驅(qū)動 2.1 概述
表單的控制邏輯寫在組件類中，對驗證邏輯擁有更多的控制權(quán)，適合復(fù)雜的表單的類型。
在模型驅(qū)動表單中，表單字段需要是 FormControl類的實例，實例對象可以驗證表單字段中的值，值是否被修改過等等
FormGroup 類的實例，它可以對表單進(jìn)行整體驗證。
2.2 快速上手
1）、引入 ReactiveFormsModule
import { ReactiveFormsModule } from "@angular/forms"
@NgModule({
imports: [ReactiveFormsModule]
})
export class AppModule {} 2）、在組件類中創(chuàng)建 FormGroup 表單控制對象
import { FormControl, FormGroup } from "@angular/forms"
export class AppComponent {
contactForm: FormGroup = new FormGroup({
name: new FormControl(),
phone: new FormControl()
})
} 3）、關(guān)聯(lián)組件模板中的表單
提交
4）、獲取表單值
export class AppComponent {
onSubmit() {
console.log(this.contactForm.value)
}
} 5）、設(shè)置表單默認(rèn)值
contactForm: FormGroup = new FormGroup({
name: new FormControl("默認(rèn)值"),
phone: new FormControl(15888888888)
}) 6）、表單分組
contactForm: FormGroup = new FormGroup({
fullName: new FormGroup({
firstName: new FormControl(),
lastName: new FormControl()
}),
phone: new FormControl()
})
提交
onSubmit() {
console.log(this.contactForm.value.name.username)
console.log(this.contactForm.get(["name", "username"])?.value)
} 2.3 FormArray
需求：在頁面中默認(rèn)顯示一組聯(lián)系方式，通過點擊按鈕可以添加更多聯(lián)系方式組。
import { Component, OnInit } from "@angular/core"
import { FormArray, FormControl, FormGroup } from "@angular/forms"
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: []
})
export class AppComponent implements OnInit {
// 表單
contactForm: FormGroup = new FormGroup({
contacts: new FormArray([])
})
get contacts() {
return this.contactForm.get("contacts") as FormArray
}
// 添加聯(lián)系方式
addContact() {
// 聯(lián)系方式
const myContact: FormGroup = new FormGroup({
name: new FormControl(),
address: new FormControl(),
phone: new FormControl()
})
// 向聯(lián)系方式數(shù)組中添加聯(lián)系方式
this.contacts.push(myContact)
}
// 刪除聯(lián)系方式
removeContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
// 添加默認(rèn)的聯(lián)系方式
this.addContact()
}
onSubmit() {
console.log(this.contactForm.value)
}
}
刪除聯(lián)系方式
添加聯(lián)系方式
提交
2.4 內(nèi)置表單驗證器
1）、使用內(nèi)置驗證器提供的驗證規(guī)則驗證表單字段
import { FormControl, FormGroup, Validators } from "@angular/forms"
contactForm: FormGroup = new FormGroup({
name: new FormControl("默認(rèn)值", [
Validators.required,
Validators.minLength(2)
])
}) 2）、獲取整體表單是否驗證通過
onSubmit() {
console.log(this.contactForm.valid)
}
提交 3）、在組件模板中顯示為驗證通過時的錯誤信息
get name() {
return this.contactForm.get("name")!
}
請?zhí)顚懶彰?/div>
姓名長度不能大于
{{ name.errors.maxlength.requiredLength }} 實際填寫長度為
{{ name.errors.maxlength.actualLength }}
2.5 自定義同步表單驗證器
自定義驗證器的類型是 TypeScript 類
類中包含具體的驗證方法，驗證方法必須為靜態(tài)方法
驗證方法有一個參數(shù) control，類型為 AbstractControl。其實就是 FormControl 類的實例對象的類型
如果驗證成功，返回 null
如果驗證失敗，返回對象，對象中的屬性即為驗證標(biāo)識，值為 true，標(biāo)識該項驗證失敗
驗證方法的返回值為 ValidationErrors | null
import { AbstractControl, ValidationErrors } from "@angular/forms"
export class NameValidators {
// 字段值中不能包含空格
static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
// 驗證未通過
if (/\s/.test(control.value)) return { cannotContainSpace: true }
// 驗證通過
return null
}
} import { NameValidators } from "./Name.validators"
contactForm: FormGroup = new FormGroup({
name: new FormControl("", [
Validators.required,
NameValidators.cannotContainSpace
])
})
姓名中不能包含空格
2.6 自定義異步表單驗證器
import { AbstractControl, ValidationErrors } from "@angular/forms"
import { Observable } from "rxjs"
export class NameValidators {
static shouldBeUnique(control: AbstractControl): Promise {
return new Promise(resolve => {
if (control.value == "admin") {
resolve({ shouldBeUnique: true })
} else {
resolve(null)
}
})
}
} contactForm: FormGroup = new FormGroup({
name: new FormControl(
"",
[
Validators.required
],
NameValidators.shouldBeUnique
)
})
用戶名重復(fù)
正在檢測姓名是否重復(fù) 2.7 FormBuilder
創(chuàng)建表單的快捷方式。
import { FormBuilder, FormGroup, Validators } from "@angular/forms"
export class AppComponent {
contactForm: FormGroup
constructor(private fb: FormBuilder) {
this.contactForm = this.fb.group({
fullName: this.fb.group({
firstName: ["", [Validators.required]],
lastName: [""]
}),
phone: []
})
}
} 2.8 監(jiān)聽表單值的變化
實際工作中，我們常常需要根據(jù)某個表單值得變化而進(jìn)行相應(yīng)的處理，一般可以使用ngModalChange或者表單來實現(xiàn)
2.8.1 ngModalChange
import { FormControl, FormGroup } from "@angular/forms"
export class AppComponent {
public name = 'a';
public nameChange() {
}
} angular官方并不建議使用ngModalChange。
2.8.2 表單控制
import { FormControl, FormGroup } from "@angular/forms"
export class AppComponent {
contactForm: FormGroup = new FormGroup({
name: new FormControl()
})
ngOnInt() {
this.contactForm.get("name").valueChanges.subscribe(data => {
console.log(data);
}
}
} 2.9 練習(xí)
1）、獲取一組復(fù)選框中選中的值
提交
import { Component } from "@angular/core"
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
interface Data {
name: string
value: string
}
@Component({
selector: "app-checkbox",
templateUrl: "./checkbox.component.html",
styles: []
})
export class CheckboxComponent {
Data: Array = [
{ name: "Pear", value: "pear" },
{ name: "Plum", value: "plum" },
{ name: "Kiwi", value: "kiwi" },
{ name: "Apple", value: "apple" },
{ name: "Lime", value: "lime" }
]
form: FormGroup
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
checkArray: this.fb.array([])
})
}
onChange(event: Event) {
const target = event.target as HTMLInputElement
const checked = target.checked
const value = target.value
const checkArray = this.form.get("checkArray") as FormArray
if (checked) {
checkArray.push(this.fb.control(value))
} else {
const index = checkArray.controls.findIndex(
control => control.value === value
)
checkArray.removeAt(index)
}
}
onSubmit() {
console.log(this.form.value)
}
} 2）、獲取單選框中選中的值
export class AppComponent {
form: FormGroup
constructor(public fb: FormBuilder) {
this.form = this.fb.group({ gender: "" })
}
onSubmit() {
console.log(this.form.value)
}
}
Submit
2.10 其他
patchValue：設(shè)置表單控件的值（可以設(shè)置全部，也可以設(shè)置其中某一個，其他不受影響）
setValue：設(shè)置表單控件的值 (設(shè)置全部，不能排除任何一個)
valueChanges：當(dāng)表單控件的值發(fā)生變化時被觸發(fā)的事件
reset：表單內(nèi)容置空
以上就是關(guān)于“angular的兩種類型表單是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
http://weahome.cn/article/jehhpo.html
在線咨詢
微信咨詢
電話咨詢
028-86922220（工作日）
18980820575（7×24）
提交需求
返回頂部
重慶分公司
重慶分公司
