Artikel ini akan membawa anda melalui dua borang dalam Angular dan secara ringkas memperkenalkan penggunaannya, saya harap ia akan membantu semua orang!
Dalam Angular, terdapat dua jenis borang iaitu dipacu templat dan dipacu model. [Cadangan tutorial berkaitan: "tutorial sudut"]
1. Pemacu templat
1.1 Gambaran Keseluruhan
Logik kawalan borang ditulis dalam templat komponen, sesuai untuk jenis bentuk mudah
1.2 Bermula dengan pantas
Perkenalkan bergantung modulFormsModule
import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {}Tukar borang DOM kepada ngForm
<form #f="ngForm" (submit)="onSubmit(f)"></form>
Isytiharkan medan borang sebagai ngModel
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel /> <button>提交</button> </form>
Dapatkan medan borang nilai
import { NgForm } from "@angular/forms"
export class AppComponent {
onSubmit(form: NgForm) {
console.log(form.value)
}
}Pengumpulan Borang
<form #f="ngForm" (submit)="onSubmit(f)">
<div ngModelGroup="user">
<input type="text" name="username" ngModel />
</div>
<div ngModelGroup="contact">
<input type="text" name="phone" ngModel />
</div>
<button>提交</button>
</form>1.3 Pengesahan Borang
required Medan yang diperlukanminlength Panjang medan minimum maxlength Panjang medan maksimum pattern Contoh biasa pengesahan: pattern="d" sepadan dengan nilai <form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel required pattern="\d" /> <button>提交</button> </form>
export class AppComponent {
onSubmit(form: NgForm) {
// 查看表单整体是否验证通过
console.log(form.valid)
}
}<!-- 表单整体未通过验证时禁用提交表单 --> <button type="submit" [disabled]="f.invalid">提交</button>
Paparkan mesej ralat apabila item borang gagal pengesahan dalam templat komponen
<form #f="ngForm" (submit)="onSubmit(f)">
<input #username="ngModel" />
<div *ngIf="username.touched && !username.valid && username.errors">
<div *ngIf="username.errors.required">请填写用户名</div>
<div *ngIf="username.errors.pattern">不符合正则规则</div>
</div>
</form>Tentukan gaya apabila item borang gagal pengesahan
input.ng-touched.ng-invalid {
border: 2px solid red;
}2 . Didorong model
2.1 Gambaran Keseluruhan
Logik kawalan borang ditulis dalam kelas komponen, yang mempunyai lebih kawalan atas logik pengesahan dan sesuai untuk jenis borang Kompleks.
Dalam borang dipacu model, medan borang perlu menjadi contoh kelas FormControl Objek contoh boleh mengesahkan nilai dalam medan borang, sama ada nilai telah diubah suai, dsb. < .
FormGroup
FormControl
: Digunakan untuk borang yang kompleks, yang boleh menambah item borang atau membentuk kumpulan secara dinamik Semasa pengesahan borang, satu item dalam FormGroup gagal dan keseluruhannya gagal FormGroup
2.2 Bermula dengan cepatFormArrayFormArray
Buat kawalan borang objek dalam kelas komponen
ReactiveFormsModule Borang templat komponen yang berkaitan
import { ReactiveFormsModule } from "@angular/forms"
@NgModule({
imports: [ReactiveFormsModule]
})
export class AppModule {}Dapatkan nilai borangFormGroup
import { FormControl, FormGroup } from "@angular/forms"
export class AppComponent {
contactForm: FormGroup = new FormGroup({
name: new FormControl(),
phone: new FormControl()
})
}<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="name" /> <input type="text" formControlName="phone" /> <button>提交</button> </form>
export class AppComponent {
onSubmit() {
console.log(this.contactForm.value)
}
}
contactForm: FormGroup = new FormGroup({
name: new FormControl("默认值"),
phone: new FormControl(15888888888)
})contactForm: FormGroup = new FormGroup({
fullName: new FormGroup({
firstName: new FormControl(),
lastName: new FormControl()
}),
phone: new FormControl()
})<form [formGroup]="contactForm" (submit)="onSubmit()">
<div formGroupName="fullName">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName" />
</div>
<input type="text" formControlName="phone" />
<button>提交</button>
</form>onSubmit() {
console.log(this.contactForm.value.name.username)
console.log(this.contactForm.get(["name", "username"])?.value)
} FormArray2.4 Pengesah borang terbina dalam
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
}
// 添加联系方式
addContact() {
// 联系方式
const myContact: FormGroup = new FormGroup({
name: new FormControl(),
address: new FormControl(),
phone: new FormControl()
})
// 向联系方式数组中添加联系方式
this.contacts.push(myContact)
}
// 删除联系方式
removeContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
// 添加默认的联系方式
this.addContact()
}
onSubmit() {
console.log(this.contactForm.value)
}
}<form [formGroup]="contactForm" (submit)="onSubmit()">
<div formArrayName="contacts">
<div
*ngFor="let contact of contacts.controls; let i = index"
[formGroupName]="i"
>
<input type="text" formControlName="name" />
<input type="text" formControlName="address" />
<input type="text" formControlName="phone" />
<button (click)="removeContact(i)">删除联系方式</button>
</div>
</div>
<button (click)="addContact()">添加联系方式</button>
<button>提交</button>
</form>Dapatkan sama ada keseluruhan borang disahkan atau tidak
Mesej ralat yang dipaparkan dalam templat komponen apabila pengesahan diluluskan
import { FormControl, FormGroup, Validators } from "@angular/forms"
contactForm: FormGroup = new FormGroup({
name: new FormControl("默认值", [
Validators.required,
Validators.minLength(2)
])
})onSubmit() {
console.log(this.contactForm.valid)
}<!-- 表单整体未验证通过时禁用表单按钮 --> <button [disabled]="contactForm.invalid">提交</button>
get name() {
return this.contactForm.get("name")!
}<form [formGroup]="contactForm" (submit)="onSubmit()">
<input type="text" formControlName="name" />
<div *ngIf="name.touched && name.invalid && name.errors">
<div *ngIf="name.errors.required">请填写姓名</div>
<div *ngIf="name.errors.maxlength">
姓名长度不能大于
{{ name.errors.maxlength.requiredLength }} 实际填写长度为
{{ name.errors.maxlength.actualLength }}
</div>
</div>
</form>kelas <🎜 Kelas >
mengandungi kaedah pengesahan khusus, yang mestilah kaedah statikTypeScript mempunyai parameter
controlAbstractControlFormControlJika pengesahan gagal, kembalikan objek, Atribut dalam objek ialah pengecam pengesahan, dan nilainya ialah
null kaedah pengesahan ialah
true
2.6 Pengesah borang tak segerak tersuaiValidationErrors | 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
])
})<div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.cannotContainSpace">姓名中不能包含空格</div> </div>
Pintasan untuk mencipta borang.
import { AbstractControl, ValidationErrors } from "@angular/forms"
export class NameValidators {
static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
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
)
})<div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.shouldBeUnique">用户名重复</div> </div> <div *ngIf="name.pending">正在检测姓名是否重复</div>
: item borang FormBuilder
this.fb.control
this.fb.group<. 🎜> FormGroup
2.8 Latihanthis.fb.arrayFormArray
export class AppComponent {
form: FormGroup
constructor(public fb: FormBuilder) {
this.form = this.fb.group({ gender: "" })
}
onSubmit() {
console.log(this.form.value)
}
}<form [formGroup]="form" (submit)="onSubmit()"> <input type="radio" value="male" formControlName="gender" /> Male <input type="radio" value="female" formControlName="gender" /> Female <button type="submit">Submit</button> </form>
2.9 其他
patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响）
setValue：设置表单控件的值 (设置全部，不能排除任何一个)
valueChanges：当表单控件的值发生变化时被触发的事件
reset：表单内容置空
updateValueAndValidity：对指定输入框 取消校验
validateForm: FormGroup; this.validateForm.get('cpwd').updateValueAndValidity();
更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci Analisis ringkas dua jenis borang dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
