Analisis ringkas tentang bentuk responsif dalam Angular
青灯夜游
Lepaskan： 2022-04-25 10:26:40
ke hadapan
3310 orang telah melayarinya
Artikel ini akan membincangkan tentang bentuk responsif dalam Angular, dan memperkenalkan kaedah pelaksanaan borang mudah melalui contoh saya harap ia akan membantu semua orang!
Disebabkan peningkatan rangka kerja syarikat baru-baru ini, kaedah asal untuk menyemak borang secara manual telah ditinggalkan dan semua borang telah ditukar kepada responsif Memandangkan saya tidak pernah menggunakannya sebelum ini, pada mulanya saya fikir saya seorang sahaja yang tidak pernah menggunakannya Selepas mengenali rakan sekerja lain dalam kumpulan, saya mengetahui bahawa mereka pada dasarnya tidak begitu biasa dengannya
Masa menjadi sempit kemudian Saya tidak mempunyai pilihan selain untuk belajar dan berubah semasa melakukannya, jadi tidak dapat dielakkan bahawa saya telah terpijak beberapa perangkap, saya juga meluangkan sedikit masa untuk mengkajinya masih merupakan sejenis pemurnian untuk merumuskan proses pembelajaran dan rumusan serta kaedah untuk menyelesaikan masalah. Di sini ia lebih mengenai menggabungkan teori dengan keperluan perniagaan sebenar, dan bukannya menulis pengenalan API secara membuta tuli dalam cara dokumen rasmi. Jika itu berlaku, ia akan menjadi nota kajian, bukan ringkasan.
Mengapa terutamanya memperkenalkan borang responsif? Kerana borang reaktif menyediakan akses langsung dan eksplisit kepada model objek borang yang mendasari. Ia lebih teguh daripada borang dipacu templat: ia lebih boleh dikembangkan, boleh diguna semula dan boleh diuji. Ia sesuai untuk bentuk yang lebih kompleks Malah, perkara yang paling penting ialah saya tidak tahu bagaimana untuk melakukan perkara lain. [Cadangan tutorial berkaitan: "tutorial sudut"]
1. Konsep asas borang responsif
1 >
1.
FormControl: Digunakan untuk menjejak nilai dan status pengesahan kawalan borang tunggal, seperti pengikatan medan
//初始化一个栏位的值为测试名字，并且不可用
const Name:FormControl = new FormControl({value:'测试名字', disabled: true });
Salin selepas log masuk
2.
FormArray: digunakan untuk menjejaki nilai dan status tatasusunan kawalan borang, seperti beberapa medan bersama-sama, jadual yang biasa digunakan atau jadual terbenam dalam borang
//定义表单对象的属性为aliases的FormArray
this.validateForm = this.fb.group({aliases: this.fb.array([]),});
//获取FormArray
get aliases() {return this.validateForm.get('aliases') as FormArray;}
//给FormArray 添加item
this.aliases.push(
this.fb.group({Id: 0,Name: [null],})
);
Salin selepas log masuk
3.
FormGroup: Digunakan untuk menjejaki nilai dan status pengesahan satu kawalan borang Ia boleh mengandungi satu atau berbilang FormControl dan FormArray Secara amnya, borang sepadan dengan contoh FormGroup, dan setiap medan borang sepadan dengan FormControl dan FormArray. . Sudah tentu, mereka boleh dibenamkan dalam satu sama lain Sebagai contoh, FormArray boleh bersarang dalam FormGroup, begitulah fleksibilitinya.
validateForm = new FormGroup({Name: new FormControl({value:'测试名字', disabled: true }),});
validateForm = this.fb.group({});
Salin selepas log masuk
4.
FormBuilder: Ia adalah penyedia perkhidmatan suntikan secara manual akan menjadi sangat membosankan masa lalu, setiap ciptaan perlu menjana FormGroup dan kemudiannya FormControl Menggunakan kaedah kumpulan FormBuilder boleh mengurangkan kod berulang Secara terang-terangan, ia membantu menjana borang dengan mudah
validateForm!: FormGroup;
//手动创建
validateForm = new FormGroup({
Name: new FormControl('测试名字'),
});
//FormBuilder表单构建器
validateForm = this.fb.group({
Name:[ { value:'测试名字',disabled:true}],
});
Salin selepas log masuk
<. 🎜> 2. Pengesahan borang pengesah Pengesahan borang digunakan untuk memastikan input pengguna adalah lengkap dan betul. Cara menambah pengesah tunggal pada kawalan borang dan cara memaparkan status keseluruhan borang Biasanya pengesah mengembalikan nol untuk menunjukkan bahawa semua pengesahan lulus.
1.
Pengesah segerak
: Fungsi pengesah segerak menerima tika kawalan dan kemudian mengembalikan satu set ralat pengesahan atau , yang boleh digunakan sebagai ralat kedua apabila membuat seketika FormControl Parameter dihantar dalamnull
//formControlName的值必须和ts代码中FormControl 的实例一致
<input type="text" id="name" class="form-control" formControlName="name" required>
//判断对应的FormControl 是否没通过校验 而有错误信息
<div *ngIf="name.errors?.['required']">
Name is required.
</div>
Salin selepas log masuk
2.
//初始化一个栏位并且加入必填校验验证器
const name:FormControl = new FormControl({'测试名字', disabled: true },Validators.required,);
//获取这个FormControl
get name() { return this.heroForm.get('name'); }
Salin selepas log masuk
Pengesah tak segerak
: Fungsi tak segerak menerima tika kawalan dan mengembalikan Janji atau Boleh Diperhatikan Hanya selepas semua pengesah segerak lulus, Angular akan jalankan pengesah tak segerak. Apabila membuat instantiat FormControl, anda boleh memasukkannya sebagai parameter ketiga 3.
Pengesah terbina dalam
: Contohnya, sahkan beberapa panjang, yang tidak boleh kosong. Gunakan kelas Pengesah yang disediakan untuk melaksanakan 4.
Pengesah tersuai
: Pengesah yang disediakan dalam sistem tidak dapat memenuhi keperluan sedia ada Anda boleh menggunakan pengesah tersuai untuk melakukan beberapa perkara yang diperibadikan , pengesah tersuai mesti mengembalikan jenis ValidationErrors atau kosongkan
Gunakan setVlue boleh menetapkan nilai kawalan FormControl, tetapi apabila digunakan, semua sifat FormGroup mesti ditetapkan bersama-sama dan tidak boleh ditetapkan secara individu Ia sering digunakan untuk mengubah suai tugasan pemuatan.
patchValue()
Menggunakan patchValue, anda juga boleh menetapkan nilai FormControl dan anda boleh tetapkan nilai yang ditentukan mengikut keperluan FormControl, tanpa memerlukan semua tetapan, selalunya digunakan untuk mengemas kini nilai medan tertentu
set semula ()
Digunakan dalam FormControl untuk menetapkan semula semua keadaan kawalan semasa, digunakan dalam FormGroup untuk menetapkan semula kandungan dalam objek borang, contohnya, jika kawalan ditetapkan kepada dilumpuhkan, control.reset({ value: ' Drew', disabled: true });
markAsPristine()
menandakan nilai kawalan borang sebagai tidak berubah. Kaedah ini digunakan terutamanya apabila borang diulang Apabila ditetapkan, statusnya adalah benar pada masa ini
markAsDirty()
adalah untuk menukar borang FormControl Nilai kawalan ditandakan sebagai berubah dan statusnya Dirty adalah benar pada masa ini
updateValueAndValidity()
Kira semula nilai dan status pengesahan kawalan FormControl
属性
使用方法说明
touched
当表单FormControl 控件 的touched为true表示控件已经被获取焦点，反之同理
untouched
当untouched 为true表示控件未被获取焦点,反之同理
pristine
表示表单元素是纯净的，用户未操作过，可以使用markAsPristine方法设为true
dirty
表示表单元素是已被用户操作过，可以使用markAsDirty方法设为true
status
获取表单FormControl 控件上的的状态
Errors
获取当前控件的错误信息
setValidators ()<🎜>
kepada kawalan FormControl Tetapkan pengesah Jika anda menetapkan berbilang pengesah, gunakan tatasusunan "<🎜>setValidator([v1,v2,v3])<🎜>"
<🎜 >disable()<🎜>
Tetapkan kawalan FormControl menjadi tidak tersedia Ambil perhatian bahawa apabila FormControl dilumpuhkan, yang sepadan nilai nilai biasa borang getValue() akan kosong Anda boleh menggunakan getRawValue() untuk mendapatkan nilai asal Objek mendapat nilai FormControl yang sepadan
<🎜>enable()<🎜>
Dayakan borang FormControl control
<🎜><🎜><🎜>< 🎜><🎜>Sifat<🎜><🎜><🎜><🎜><🎜><🎜>
Atribut
Penggunaan arahan
<🎜>disentuh <🎜>
Apabila sentuhan kawalan FormControl adalah benar, ini bermakna bahawa kawalan telah mendapat fokus, dan begitu juga sebaliknya
<🎜>tidak disentuh<🎜>< /td>
Apabila tidak disentuh adalah benar, ia bermakna kawalan belum mendapat fokus , dan sebaliknya
<🎜>murni<🎜>
bermaksud bentuk Elemen itu tulen dan belum dikendalikan oleh pengguna boleh menggunakan kaedah markAsPristine untuk menetapkannya kepada benar
<🎜>kotor<🎜>
untuk menunjukkan bahawa elemen bentuk telah Jika ia telah dikendalikan oleh pengguna, anda boleh menggunakan kaedah markAsDirty untuk menetapkannya kepada benar
Atas ialah kandungan terperinci Analisis ringkas tentang bentuk responsif dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
