Artikel ini akan membawa anda melalui borang dalam sudut dan mempelajari tentang dua jenis borang: dipacu templat dan dipacu model saya harap ia akan membantu anda!
Dalam Sudut, terdapat dua jenis bentuk iaitu 模板驱动 dan 模型驱动. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]
1.1 Gambaran Keseluruhan<.> borang 🎜>
ditulis dalam 控制逻辑, yang sesuai untuk jenis bentuk 组件模板. 简单
1.2 Bermula dengan pantas
1), memperkenalkan modul bergantung FormsModule
import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {}<form #f="ngForm" (submit)="onSubmit(f)"></form>
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel /> <button>提交</button> </form>
import { NgForm } from "@angular/forms"
export class AppComponent {
onSubmit(form: NgForm) {
console.log(form.value) // {username: ''}
}
}<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>import { NgForm } from "@angular/forms"
export class AppComponent {
onSubmit(form: NgForm) {
console.log(form.value) // {contact: {phone: ''}, user:{username: ''}}
}
}1.3 Pengesahan borang
<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>
<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>input.ng-touched.ng-invalid {
border: 2px solid red;
}2.1 Gambaran Keseluruhan
Borang ditulis dalam 控制逻辑, yang mempunyai lebih kawalan ke atas logik pengesahan dan sesuai untuk jenis borang 组件类. 复杂
Objek contoh boleh menjadi nilai dalam FormControl, sama ada nilai telah diubah suai, dsb. 验证表单字段
Satu set medan borang membentuk keseluruhan borang. Keseluruhan borang perlu menjadi contoh kelas
, yang boleh FormGroup mengesahkan borang. 整体
2.2 Bermula dengan pantas
1), memperkenalkan ReactiveFormsModuleimport { ReactiveFormsModule } from "@angular/forms"
@NgModule({
imports: [ReactiveFormsModule]
})
export class AppModule {}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)
}2.3 FormArray
Keperluan: Sekumpulan maklumat hubungan dipaparkan pada halaman secara lalai, dan lebih banyak kumpulan maklumat hubungan boleh ditambah dengan mengklik butang.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>2.4 Pengesah borang terbina dalam
1), gunakan peraturan pengesahan yang disediakan oleh pengesah terbina dalam untuk mengesahkan medan borangimport { 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>2.5 Pengesah borang segerak tersuai
< Kelas 🎜>
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>
2.6 Pengesah Borang Tak Segerak Tersuai
import { AbstractControl, ValidationErrors } from "@angular/forms"
import { Observable } from "rxjs"
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>
2.7 FormBuilderCara
untuk mencipta borang.快捷
this.fb.control
this.fb.group
this.fb.array
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 Memantau perubahan dalam nilai bentuk 实际工作中，我们常常需要根据某个表单值得变化而进行相应的处理，一般可以使用 2.8.1 ngModalChange angular官方并不建议使用ngModalChange。 2.8.2 表单控制 2.9 练习 1）、获取一组复选框中选中的值 2）、获取单选框中选中的值 2.10 其他 patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响） setValue：设置表单控件的值 (设置全部，不能排除任何一个) valueChanges：当表单控件的值发生变化时被触发的事件 reset：表单内容置空 更多编程相关知识，请访问：编程视频！！ Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang dua jenis bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!ngModalChange或者表单来实现<div>
<input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" />
</div>
import { FormControl, FormGroup } from "@angular/forms"
export class AppComponent {
public name = 'a';
public nameChange() {
}
}<div [formGroup]="contactForm">
<input type="text" formControlName="name" />
</div>
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);
}
}
}<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="let item of Data">
<input type="checkbox" [value]="item.value" (change)="onChange($event)" />
{{ item.name }}
</label>
<button>提交</button>
</form>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<Data> = [
{ 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)
}
}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>
alat ujian aplikasi
Apakah perbezaan antara ruang lebar penuh dan ruang separuh lebar?
Trend harga Eth hari ini
pelayan rtmp
Lihat maklumat sistem dalam linux
ipad airplay
Bagaimana untuk menyelesaikan ranap permulaan tomcat
Bagaimana untuk menyelesaikan masalah bahawa perkongsian rangkaian komputer riba tidak mempunyai kebenaran?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
