Di Angular, ada dua jenis formulir,模板驱动dan模型驱动. [Tutorial terkait yang disarankan: "Tutorial Sudut"]
1.1 Ikhtisar
控制逻辑formulir ditulis dalam组件模板, yang cocok untuk tipe formulir简单.
1.2 Memulai dengan cepat
1). Perkenalkan modul dependen FormsModule
import { FormsModule } dari "@angular/forms"
@NgModule({
impor: [FormsModule],
})
ekspor kelas AppModule {} 2) Konversi formulir DOM menjadi ngForm
<form #f="ngForm" (submit)="onSubmit(f)"></form>
3) Deklarasikan kolom formulir sebagai ngModel
<form #f= " ngForm" (kirim)="onSubmit(f)"> <input type="teks" nama="nama pengguna" ngModel /> <button>Kirim</button> </form>
4). Dapatkan nilai bidang formulir
impor { NgForm } dari "@angular/forms"
kelas ekspor Komponen Aplikasi {
onSubmit(formulir: NgForm) {
console.log(form.value) // {nama pengguna: ''}
}
} 5), pengelompokan formulir
<form #f="ngForm" (submit)="onSubmit(f)">
<div ngModelGroup="pengguna">
<input type="teks" nama="nama pengguna" ngModel />
</div>
<div ngModelGroup="kontak">
<input type="teks" nama="ponsel" ngModel />
</div>
<button>Kirim</button>
</form> impor { NgForm } dari "@angular/forms"
kelas ekspor Komponen Aplikasi {
onSubmit(formulir: NgForm) {
console.log(form.value) // {kontak: {telepon: ''}, pengguna:{nama pengguna: ''}}
}
} 1.3 Validasi formulir
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="teks" nama="nama pengguna" ngModel diperlukan pola="d" /> <button>Kirim</button> </form>
ekspor kelas AppComponent {
onSubmit(formulir: NgForm) {
// Periksa apakah seluruh formulir diverifikasi melalui console.log(form.valid)
}
} <!-- Nonaktifkan pengiriman formulir ketika seluruh formulir gagal validasi --> <button type="submit" [disabled]="f.invalid">Kirim</button>
menampilkan pesan kesalahan ketika item formulir gagal di templat komponen.
<formulir #f="ngForm" (kirim)="onSubmit(f)">
<masukan #namapengguna="ngModel" />
<div *ngIf="namapengguna.sentuh && !namapengguna.valid && nama pengguna.kesalahan">
<div *ngIf="username.errors.required">Silakan isi nama pengguna</div>
<div *ngIf="username.errors.pattern">Tidak sesuai dengan aturan reguler</div>
</div>
</form> Menentukan gaya ketika item formulir gagal validasi.
input.ng-sentuh.ng-tidak valid {
batas: 2px merah solid;
} 2.1 Ikhtisar
控制逻辑formulir ditulis di组件类, yang memiliki kontrol lebih besar atas logika verifikasi dan cocok untuk tipe formulir复杂.
Dalam formulir berdasarkan model, bidang formulir harus merupakan turunan dari kelas FormControl . Objek instans dapat验证表单字段, apakah nilainya telah diubah, dll.
Satu set bidang formulir membentuk keseluruhan formulir, dan seluruh formulir harus merupakan turunan dari kelas FormGroup , yang dapat melakukan validasi整体pada formulir.
FormControl: item formulir dalam grup formulir.
FormGroup: grup formulir. Formulir tersebut setidaknya terdiri dari satu FormGroup.
FormArray: digunakan untuk formulir yang kompleks. Ini dapat secara dinamis menambahkan item formulir atau grup formulir gagal dan keseluruhannya gagal.
2.2 Memulai dengan cepat
1), perkenalkan ReactiveFormsModule
import { ReactiveFormsModule } dari "@angular/forms"
@NgModule({
impor: [ReactiveFormsModule]
})
kelas ekspor AppModule {} 2). Buat objek kontrol formulir FormGroup di kelas komponen
import { FormControl, FormGroup } dari "@angular/forms"
kelas ekspor Komponen Aplikasi {
contactForm: FormGroup = FormGroup baru({
nama: FormControl baru(),
telepon: FormControl baru()
})
} 3). Formulir dalam templat komponen terkait
<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="teks" formControlName="nama" /> <input type="teks" formControlName="telepon" /> <button>Kirim</button> </form>4). Dapatkan
kelas ekspor
nilai formulir
AppComponent {
saat Kirim() {
console.log(ini.contactForm.value)
}
} 5). Tetapkan nilai default formulir
contactForm: FormGroup = new FormGroup({
nama: FormControl baru("Nilai default"),
telepon: FormControl baru (15888888888)
}) 6), pengelompokan formulir
contactForm: FormGroup = new FormGroup({
Nama lengkap: FormGroup baru({
Nama Depan: FormControl baru(),
Nama Belakang: FormControl baru()
}),
telepon: FormControl baru()
}) <formulir [formGroup]="contactForm" (kirim)="onSubmit()">
<div formGroupName="Nama Lengkap">
<input type="teks" formControlName="Nama Depan" />
<input type = "teks" formControlName = "Nama Belakang" />
</div>
<input type="teks" formControlName="telepon" />
<button>Kirim</button>
</form> diKirim() {
console.log(ini.contactForm.value.name.nama pengguna)
console.log(ini.contactForm.get(["nama", "nama pengguna"])?.nilai)
} 2.3 Persyaratan FormArray
: Sekelompok informasi kontak ditampilkan pada halaman secara default, dan lebih banyak grup informasi kontak dapat ditambahkan dengan mengklik tombol.
impor { Komponen, OnInit } dari "@angular/core"
impor { FormArray, FormControl, FormGroup } dari "@angular/forms"
@Komponen({
pemilih: "root-aplikasi",
templateUrl: "./app.component.html",
gaya: []
})
kelas ekspor AppComponent mengimplementasikan OnInit {
// formulir contactForm: FormGroup = FormGroup baru({
kontak: FormArray baru([])
})
dapatkan kontak() {
kembalikan this.contactForm.get("contacts") sebagai FormArray
}
//Tambahkan informasi kontak addContact() {
//Informasi kontak const myContact: FormGroup = new FormGroup({
nama: FormControl baru(),
alamat: FormControl baru(),
telepon: FormControl baru()
})
//Tambahkan informasi kontak ke array informasi kontak this.contacts.push(myContact)
}
// Hapus informasi kontak hapusKontak(i: nomor) {
ini.kontak.removeAt(i)
}
ngOnInit() {
//Tambahkan informasi kontak default this.addContact()
}
saat Kirim() {
console.log(ini.contactForm.value)
}
} <formulir [formGroup]="contactForm" (kirim)="onSubmit()">
<div formArrayName="kontak">
<div
*ngFor="biarkan kontak dari kontak.kontrol; biarkan i = mengindeks"
[formGroupName]="i"
>
<input type="teks" formControlName="nama" />
<input type="teks" formControlName="alamat" />
<input type="teks" formControlName="telepon" />
<button (click)="removeContact(i)">Hapus informasi kontak</button>
</div>
</div>
<button (klik)="addContact()">Tambahkan informasi kontak</button>
<button>Kirim</button>
</form> 2.4 Validator formulir bawaan
1) Gunakan aturan validasi yang disediakan oleh validator bawaan untuk memvalidasi bidang formulir
import { FormControl, FormGroup, Validators } dari "@angular/forms"
contactForm: FormGroup = FormGroup baru({
nama: new FormControl("Nilai default", [
Validator.diperlukan,
Validator.minLength(2)
])
}) 2). Mengetahui apakah seluruh formulir telah lolos verifikasi
onSubmit() {
console.log(ini.contactForm.valid)
} <!-- Nonaktifkan tombol formulir ketika seluruh formulir gagal verifikasi --> <button [disabled]="contactForm.invalid">Kirim</button>
3). Tampilkan pesan kesalahan saat verifikasi diteruskan di templat komponen
get name() {
kembalikan ini.contactForm.get("nama")!
} <formulir [formGroup]="contactForm" (kirim)="onSubmit()">
<input type="teks" formControlName="nama" />
<div *ngIf="nama.sentuh && nama.tidak valid && nama.kesalahan">
<div *ngIf="name.errors.required">Silakan isi nama Anda</div>
<div *ngIf="nama.errors.maxlength">
Panjang nama tidak boleh lebih besar dari {{ name.errors.maxlength.requiredLength }}. Panjang sebenarnya adalah {{ name.errors.maxlength.actualLength }}.
</div>
</div>
</form> 2.5 Validator formulir sinkron khusus
Jenis validator khusus adalah kelas TypeScript
. Kelas tersebut berisi metode verifikasi tertentu. Metode verifikasi harus berupa metode statis.
Metode verifikasi memiliki kontrol parameter, bertipe abstractControl. Faktanya, ini adalah tipe objek instance dari kelas FormControl.
Jika verifikasi berhasil, null dikembalikan.
Jika verifikasi gagal, objek dikembalikan. Atribut dalam objek adalah identifikasi verifikasi, dan nilainya adalah benar, menunjukkan bahwa verifikasi gagal.
Nilai kembalian dari metode verifikasi adalah ValidationErrors |. null
import { abstractControl, ValidationErrors } dari "@angular/forms"
kelas ekspor NameValidators {
// Nilai bidang tidak boleh berisi spasi static tidak dapatContainSpace(kontrol: AbstrakKontrol): ValidationErrors |.
// Verifikasi gagal jika (/s/.test(control.value)) return { tidak dapatContainSpace: true }
//Verifikasi berhasil mengembalikan null
}
} impor { NameValidators } dari "./Name.validators"
contactForm: FormGroup = FormGroup baru({
nama: FormControl baru("", [
Validator.diperlukan,
NameValidators.cannotContainSpace
])
}) <div *ngIf="nama.sentuh && nama.tidak valid && nama.kesalahan"> <div *ngIf="name.errors.cannotContainSpace">Nama tidak boleh mengandung spasi</div> </div>
2.6 Impor validator formulir asinkron khusus
{ AbstrakKontrol, ValidasiErrors } dari "@angular/forms"
impor {Dapat Diamati } dari "rxjs"
kelas ekspor NameValidators {
static mustBeUnique(kontrol: AbstrakKontrol): Janji<ValidationErrors |.
kembalikan Janji baru(putuskan => {
if (kontrol.nilai == "admin") {
tekad({ harusBeUnik: benar })
} kalau tidak {
menyelesaikan(batal)
}
})
}
} contactForm: FormGroup = FormGroup baru({
nama: FormControl baru(
"",
[
Validator.diperlukan
],
NameValidators.harusUnik
)
}) <div *ngIf="nama.sentuh && nama.tidak valid && nama.kesalahan"> <div *ngIf="name.errors.shouldBeUnique">Nama pengguna duplikat</div> </div> <div *ngIf="name.pending">Mendeteksi apakah nama merupakan duplikat</div>
2.7 Pintasan FormBuilder
快捷membuat formulir.
this.fb.control : item formulir
this.fb.group : grup formulir, setidaknya ada satu formulir FormGroup
this.fb.array : digunakan untuk formulir yang kompleks, Anda dapat secara dinamis menambahkan item formulir atau grup formulir, selama validasi formulir, di sana adalah FormArray Item gagal dan keseluruhan gagal.
impor { FormBuilder, FormGroup, Validator } dari "@angular/forms"
kelas ekspor Komponen Aplikasi {
formulir kontak: FormulirGrup
konstruktor(fb pribadi: FormBuilder) {
this.contactForm = ini.fb.grup({
Nama Lengkap: this.fb.group({
Nama Depan: ["", [Validator.diperlukan]],
Nama Belakang: [""]
}),
telepon: []
})
}
} 2.8 Memantau perubahan nilai formulir
Dalam pekerjaan sebenarnya, kita sering kali perlu melakukan pemrosesan terkait berdasarkan perubahan nilai formulir. Secara umum, kita dapat menggunakan ngModalChange atau formulir untuk mencapai
2.8.1 ngModalChange
<div> <input type="text" [(ngModal)]="nama" (ngModalChange)="nameChange()" /> </div>
impor { FormControl, FormGroup } dari "@angular/forms"
kelas ekspor Komponen Aplikasi {
nama publik = 'a';
perubahan nama publik() {
}
} Angular secara resmi tidak merekomendasikan penggunaan ngModalChange.
2.8.2 Kontrol formulir
<div [formGroup]="contactForm"> <input type="teks" formControlName="nama" /> </div>
impor { FormControl, FormGroup } dari "@angular/forms"
kelas ekspor Komponen Aplikasi {
contactForm: FormGroup = FormGroup baru({
nama: FormControl baru()
})
ngOnInt() {
this.contactForm.get("nama").valueChanges.subscribe(data => {
konsol.log(data);
}
}
} 2.9 Latihan
1), Dapatkan nilai yang dipilih dalam kelompok kotak centang
<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="biarkan item Data">
<input type="kotak centang" [nilai]="item.nilai" (perubahan)="onChange($event)" />
{{ nama item }}
</label>
<button>Kirim</button>
</form> impor { Komponen } dari "@angular/core"
impor { FormArray, FormBuilder, FormGroup } dari "@angular/forms"
data antarmuka {
nama: tali
nilai: tali
}
@Komponen({
pemilih: "kotak centang aplikasi",
templateUrl: "./checkbox.component.html",
gaya: []
})
kelas ekspor Komponen Kotak Centang {
Data: Larik<Data> = [
{ nama: "Pir", nilai: "pir" },
{ nama: "Plum", nilai: "plum" },
{ nama: "Kiwi", nilai: "kiwi" },
{ nama: "Apel", nilai: "apel" },
{ nama: "Kapur", nilai: "Kapur" }
]
bentuk: FormulirGrup
konstruktor(fb pribadi: FormBuilder) {
ini.formulir = ini.fb.grup({
checkArray: ini.fb.array([])
})
}
onChange(acara: Acara) {
const target = event.target sebagai HTMLInputElement
const diperiksa = target.diperiksa
nilai const = target.nilai
const checkArray = this.form.get("checkArray") sebagai FormArray
jika (dicentang) {
checkArray.push(ini.fb.kontrol(nilai))
} kalau tidak {
indeks const = checkArray.controls.findIndex(
kontrol => kontrol.nilai === nilai
)
checkArray.removeAt(indeks)
}
}
saat Kirim() {
console.log(ini.bentuk.nilai)
}
} 2). Dapatkan nilai yang dipilih di
kelas ekspor tombol radio AppComponent {
bentuk: FormulirGrup
konstruktor(fb publik: FormBuilder) {
this.form = this.fb.group({ gender: "" })
}
saat Kirim() {
console.log(ini.bentuk.nilai)
}
} <formulir [formGroup]="form" (kirim)="onSubmit()"> <input type="radio" value="male" formControlName="gender" /> Pria <input type="radio" value="female" formControlName="gender" /> Wanita <button type="submit">Kirim</button> </form>
2.10
PatchValue lainnya: Tetapkan nilai kontrol formulir (Anda dapat mengatur semua, atau Anda dapat mengatur salah satunya, yang lain tidak terpengaruh)
setValue: Mengatur nilai kontrol formulir (mengatur semua, tidak dapat mengecualikan salah satu)
valueChanges: Ketika formulir Acara reset dipicu ketika nilai kontrol berubah
: konten formulir dikosongkan