Artikel ini akan membawa anda untuk terus belajar sudut, mempelajari tentang bentuk responsif dalam sudut, dan memperkenalkan pengetahuan yang berkaitan tentang pendaftaran global modul borang responsif dan menambah kawalan borang asas berguna untuk semua orang!

Borang Responsif
Angular menyediakan dua cara berbeza untuk mengendalikan input pengguna melalui borang: 响应式表单
dan 模板驱动表单
. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]
- Borang responsif: Menyediakan akses langsung dan eksplisit kepada model objek bentuk asas. Ia lebih teguh daripada borang dipacu templat. Jika borang ialah bahagian penting apl anda, atau anda sudah membina apl anda menggunakan borang reaktif, gunakan borang reaktif.
- Borang dipacu templat: bergantung pada arahan dalam templat untuk mencipta dan mengendalikan model objek asas. Ia berguna untuk menambahkan borang ringkas pada apl anda, seperti borang pendaftaran senarai e-mel.
Hanya borang responsif diperkenalkan di sini Untuk borang dipacu templat, sila rujuk tapak web rasmi:
https://angular.cn/guide/forms-. overview#setup-in- template-driven-forms
Daftar secara global modul borang responsif ReactiveFormsModule
Untuk menggunakan kawalan borang responsif, importnya daripada @angular/forms
pakejReactiveFormsModule
dan tambahkannya pada tatasusunan NgModule
anda. Seperti berikut: imports
app.module.ts
1 2 3 4 5 6 7 8 9 10 | import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
],
})
export class AppModule { }
|
Salin selepas log masuk
Tambah kawalan borang asas FormControl
Terdapat tiga langkah untuk menggunakan kawalan borang.
Untuk mendaftarkan kawalan borang, import kelas
dan buat tika baharu FormControl
, menyimpannya sebagai harta kelas. Seperti berikut: FormControl
test.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class TestComponent {
name = new FormControl('');
}
|
Salin selepas log masuk
Kemudian daftarkan kawalan dalam templat seperti berikut:
test.component.html
1 2 3 4 5 6 | <!-- test.component.html -->
<label>
Name: <input type= "text" [formControl]= "name" >
</label>
<!-- input 中输入的值变化的话,这里显示的值也会跟着变化 -->
<p>name: {{ name.value }}</p>
|
Salin selepas log masuk
Untuk sifat dan kaedah lain, lihat FormControl
Manual Rujukan API.
https://angular.cn/api/forms/FormControl#formcontrol
Kumpulkan kawalan borang ke dalam FormGroup
sama seperti< Sama seperti tika 🎜> membolehkan anda mengawal kawalan yang sepadan dengan kotak input tunggal, tika
juga boleh menjejaki keadaan bentuk kumpulan FormControl
tika (seperti borang). Apabila FormGroup
dicipta, setiap kawalan di dalamnya dijejaki dengan namanya. FormControl
FormGroup
Lihat contoh demonstrasi berikut:
,
test.component.ts
test.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() {}
profileForm = new FormGroup({
firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
lastName: new FormControl('', Validators.required),
});
onSubmit() {
console.log(this.profileForm.value)
}
}
|
Salin selepas log masuk
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!-- profileForm 这个 FormGroup 通过 FormGroup 指令绑定到了 form 元素,在该模型和表单中的输入框之间创建了一个通讯层 -->
<!-- FormGroup 指令还会监听 form 元素发出的 submit 事件,并发出一个 ngSubmit 事件,让你可以绑定一个回调函数。 -->
<form [formGroup]= "profileForm" (ngSubmit)= "onSubmit()" >
<label>
<!-- 由 FormControlName 指令把每个输入框和 FormGroup 中定义的表单控件 FormControl 绑定起来。这些表单控件会和相应的元素通讯 -->
First Name: <input type= "text" formControlName= "firstName" >
</label>
<label>
Last Name: <input type= "text" formControlName= "lastName" >
</label>
<button type= "submit" [disabled]= "!profileForm.valid" >Submit</button>
</form>
<p>{{ profileForm.value }}</p>
<!-- 控件组的状态: INVALID 或 VALID -->
<p>{{ profileForm.status }}</p>
<!-- 控件组输入的值是否为有效值: true 或 false-->
<p>{{ profileForm.valid }}</p>
<!-- 是否禁用: true 或 false-->
<p>{{ profileForm.disabled }}</p>
|
Salin selepas log masuk
Untuk sifat dan kaedah lain, sila rujuk Manual Rujukan APIFormGroup
. https://angular.cn/api/forms/FormGroup#formgroup
Gunakan perkhidmatan FormBuilder yang lebih mudah untuk menjana contoh kawalan
Dalam bentuk reaktif, apabila anda perlu berurusan dengan berbilang borang, mencipta berbilang contoh kawalan borang secara manual boleh menjadi sangat membosankan.
Perkhidmatan ini menyediakan beberapa kaedah mudah untuk menjana kawalan borang.
Cara yang sama di belakang tabir digunakan untuk mencipta dan mengembalikan kejadian ini, ia lebih mudah digunakan. FormBuilder
FormBuilder
ialah penyedia perkhidmatan suntikan yang disediakan oleh
. Kebergantungan ini boleh disuntik dengan hanya menambahkannya pada pembina komponen. Perkhidmatan FormBuilder
ReactiveFormModule
mempunyai tiga kaedah: , FormBuilder
dan control()
. Kaedah ini adalah kaedah kilang yang digunakan untuk menghasilkan group()
, array()
dan FormControl
masing-masing dalam kelas komponen. FormGroup
FormArray
Lihat contoh demonstrasi berikut:
test.component.ts
Perbandingan menunjukkan bahawa menggunakan perkhidmatan
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent {
constructor( private fb: FormBuilder) { }
ngOnInit() { }
profileForm = this.fb.group({
firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
lastName: ['', Validators.required],
});
onSubmit() {
console.log(this.profileForm.value)
console.log(this.profileForm)
}
}
|
Salin selepas log masuk
boleh menjana
, FormBuilder
dan < dengan lebih mudah. 🎜 >, bukannya perlu FormControl
secara manual membuat tika baharu setiap kali. FormGroup
FormArray
new
Pengesah Borang
Untuk senarai lengkap pengesah kelas API, rujuk
Manual APIValidators
https://angular.cn/api/forms/Validators
Fungsi validator (
) boleh menjadi fungsi segerak atau fungsi tak segerak.
- 同步验证器:这些同步函数接受一个控件实例,然后返回一组验证错误或 null。你可以在实例化一个
FormControl
时把它作为构造函数的第二个参数传进去。 - 异步验证器 :这些异步函数接受一个控件实例并返回一个
Promise
或 Observable
,它稍后会发出一组验证错误或 null。在实例化 FormControl
时,可以把它们作为第三个参数传入。
出于性能方面的考虑,只有在所有同步验证器都通过之后,Angular 才会运行异步验证器。当每一个异步验证器都执行完之后,才会设置这些验证错误。
验证器Validators类的API
https://angular.cn/api/forms/Validators
1 2 3 4 5 6 7 8 9 10 11 12 13 | class Validators {
static min(min: number): ValidatorFn
static max(max: number): ValidatorFn
static required(control: AbstractControl): ValidationErrors | null
static requiredTrue(control: AbstractControl): ValidationErrors | null
static email(control: AbstractControl): ValidationErrors | null
static minLength(minLength: number): ValidatorFn
static maxLength(maxLength: number): ValidatorFn
static pattern(pattern: string | RegExp): ValidatorFn
static nullValidator(control: AbstractControl): ValidationErrors | null
static compose(validators: ValidatorFn[]): ValidatorFn | null
static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}
|
Salin selepas log masuk
内置验证器函数
要使用内置验证器,可以在实例化FormControl
控件的时候添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { Validators } from '@angular/forms';
...
ngOnInit(): void {
this.heroForm = new FormGroup({
name: new FormControl(this.hero.name, [
Validators.required,
Validators.minLength(4),
forbiddenNameValidator(/bob/i)
]),
alterEgo: new FormControl(this.hero.alterEgo),
power: new FormControl(this.hero.power, Validators.required)
});
}
get name() { return this.heroForm.get('name'); }
get power() { return this.heroForm.get('power'); }
|
Salin selepas log masuk
自定义验证器
自定义验证器的内容请参考API手册
https://angular.cn/guide/form-validation
有时候内置的验证器并不能很好的满足需求,比如,我们需要对一个表单进行验证,要求输入的值只能为某一个数组中的值,而这个数组中的值是随程序运行实时改变的,这个时候内置的验证器就无法满足这个需求,需要创建自定义验证器。
在响应式表单中添加自定义验证器。在上面内置验证器一节中有一个forbiddenNameValidator
函数如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import { Validators } from '@angular/forms';
...
ngOnInit(): void {
this.heroForm = new FormGroup({
name: new FormControl(this.hero.name, [
Validators.required,
Validators.minLength(4),
forbiddenNameValidator(/bob/i)
])
});
}
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? {forbiddenName: {value: control.value}} : null;
};
}
|
Salin selepas log masuk
验证器在值有效时返回 null
,或无效时返回验证错误对象
。 验证错误对象通常有一个名为验证秘钥(forbiddenName
)的属性。其值为一个任意词典,你可以用来插入错误信息({name})。
在模板驱动表单中添加自定义验证器。要为模板添加一个指令,该指令包含了 validator
函数。同时,该指令需要把自己注册成为NG_VALIDATORS
的提供者。如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
import { Input } from '@angular/core'
@Directive({
selector: '[appForbiddenName]',
providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
@Input('appForbiddenName') forbiddenName = '';
validate(control: AbstractControl): ValidationErrors | null {
return this.forbiddenName ? forbiddenNameValidator( new RegExp(this.forbiddenName, 'i'))(control)
: null;
}
}
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const forbidden = nameRe.test(control.value);
return forbidden ? {forbiddenName: {value: control.value}} : null;
};
}
|
Salin selepas log masuk
注意,自定义验证指令是用 useExisting
而不是 useClass
来实例化的。如果用useClass
来代替 useExisting
,就会注册一个新的类实例,而它是没有forbiddenName
的。
1 | <input type= "text" required appForbiddenName= "bob" [(ngModel)]= "hero.name" >
|
Salin selepas log masuk
更多编程相关知识,请访问:编程入门!!
Atas ialah kandungan terperinci Analisis ringkas tentang bentuk responsif dalam pembelajaran sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!