Analisis singkat tentang bentuk responsif dalam pembelajaran sudut

Cara cepat memulai VUE3.0: Masuk untuk mempelajari

formulir responsif

Angular menyediakan dua metode berbeda untuk menangani masukan pengguna melalui formulir:响应式表单dan模板驱动表单. [Rekomendasi tutorial terkait: "Tutorial Sudut"]

• Formulir responsif: Menyediakan akses langsung dan eksplisit ke model objek formulir yang mendasarinya. Formulir ini lebih tangguh dibandingkan formulir berbasis templat. Jika formulir adalah bagian penting dari aplikasi Anda, atau Anda sudah membuat aplikasi menggunakan formulir reaktif, gunakan formulir reaktif.
• Formulir berbasis templat: mengandalkan instruksi dalam templat untuk membuat dan memanipulasi model objek yang mendasarinya. Mereka berguna untuk menambahkan formulir sederhana ke aplikasi Anda, seperti formulir pendaftaran daftar email.

Hanya formulir responsif yang diperkenalkan di sini. Untuk formulir berbasis templat, silakan merujuk ke situs web resmi:

https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

Daftarkan modul formulir responsif secara global ReactiveFormsModule

untuk menggunakan kontrol formulir responsif, Anda perlu mengimpor ReactiveFormsModule dari paket @angular/forms dan menambahkannya ke array imports NgModule Anda. Sebagai berikut: app.module.ts

/***** app.module.ts *****/
impor { ReactiveFormsModule } dari '@angular/forms';

@NgModule({
  impor: [
    // impor lainnya...
    Modul ReaktifForms
  ],
})
ekspor kelas AppModule {}

Tambahkan kontrol formulir dasar FormControl

Ada tiga langkah untuk menggunakan kontrol formulir.

• Daftarkan modul formulir reaktif di aplikasi Anda. Modul ini mendeklarasikan beberapa arahan yang ingin Anda gunakan dalam bentuk reaktif.

• Hasilkan instance FormControl baru dan simpan di komponen.

• Daftarkan FormControl ini di templat.

Untuk mendaftarkan kontrol formulir, impor kelas FormControl dan buat instance baru dari FormControl , simpan sebagai properti kelas. Sebagai berikut: test.component.ts

/***** test.component.ts *****/
impor { Komponen } dari '@angular/core';
impor { FormControl } dari '@angular/forms';

@Komponen({
  pemilih: 'editor-nama-aplikasi',
  templateUrl: './nama-editor.component.html',
  styleUrls: ['./nama-editor.component.css']
})
ekspor kelas TestComponent {
	// Anda dapat mengatur nilai awal di konstruktor FormControl, dalam contoh ini adalah string kosong name = new FormControl('');
}

Kemudian daftarkan kontrol pada template sebagai berikut: test.component.html

<!-- test.component.html -->
<label>
  Nama: <input type="teks" [formControl]="nama">
</label>
<!-- Jika nilai yang dimasukkan pada input berubah, nilai yang ditampilkan di sini juga akan berubah -->
<p>nama: {{ name.value }}</p>

Untuk properti dan metode FormControl lainnya, silakan merujuk ke manual referensi API .

https://angular.cn/api/forms/FormControl#formcontrol

grup membentuk kontrol ke dalam FormGroup.

Sama seperti instance FormControl yang memungkinkan Anda mengontrol kontrol yang sesuai dengan satu kotak masukan, instance FormGroup juga dapat melacak grup. Contoh FormControl (seperti status formulir suatu formulir). Ketika FormGroup dibuat, setiap kontrol di dalamnya dilacak berdasarkan namanya.

Lihat contoh demonstrasi berikut: test.component.ts , test.component.html

import { Component } from '@angular/core';
impor { FormControl, FormGroup, Validator } dari '@angular/forms'

@Komponen({
  pemilih: 'uji aplikasi',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
kelas ekspor TestComponent mengimplementasikan OnInit {
    konstruktor() {}

    profileForm = Grup Formulir baru({
      Nama Depan: FormControl baru('', [Validator.diperlukan,Validator.pola('[a-zA-Z0-9]*')]),
      Nama Belakang: FormControl baru('', Validator.diperlukan),
    });
	
	saat Kirim() {
		// Periksa nilai setiap bidang di grup kontrol console.log(this.profileForm.value)
    }
}

<!-- profileForm FormGroup ini terikat ke elemen form melalui direktif FormGroup, membuat lapisan komunikasi antara model dan kotak masukan dalam formulir -->
<!-- Direktif FormGroup juga mendengarkan event submit yang dipancarkan oleh elemen form dan memancarkan event ngSubmit, memungkinkan Anda untuk mengikat fungsi callback. -->
<formulir [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <label>
<!-- Direktif FormControlName mengikat setiap kotak masukan ke kontrol formulir FormControl yang ditentukan dalam FormGroup. Kontrol formulir ini akan berkomunikasi dengan elemen terkait -->
      Nama Depan: <input type="text" formControlName="firstName">
    </label>
    <label>
      Nama Belakang: <input type="text" formControlName="lastName">
    </label>
    <button type="submit" [disabled]="!profileForm.valid">Kirim</button>
  </bentuk>

  <p>{{ profileForm.nilai }}</p>
  <!-- Status grup kontrol: INVALID atau VALID -->
  <p>{{ profileForm.status }}</p>	
  <!-- Apakah nilai yang dimasukkan oleh grup kontrol merupakan nilai yang valid: benar atau salah-->
  <p>{{ profileForm.valid }}</p>
  <!-- Apakah akan menonaktifkan: benar atau salah-->
  <p>{{ profileForm.disabled }}</p>

Untuk properti dan metode FormGroup lainnya, silakan merujuk ke manual referensi API .

https://angular.cn/api/forms/FormGroup#formgroup

menggunakan layanan FormBuilder yang lebih sederhana untuk menghasilkan instance kontrol

. Dalam formulir responsif, saat Anda perlu menangani banyak formulir, membuat beberapa instance kontrol formulir secara manual akan sangat membosankan. Layanan FormBuilder menyediakan beberapa metode kemudahan untuk menghasilkan kontrol formulir. FormBuilder membuat dan mengembalikan instance ini dengan cara yang sama di belakang layar, hanya saja lebih mudah digunakan.

FormBuilder adalah penyedia layanan injeksi yang disediakan oleh ReactiveFormModule . Ketergantungan ini dapat dimasukkan hanya dengan menambahkannya ke konstruktor komponen.

Layanan FormBuilder memiliki tiga metode: control() , group() dan array() . Metode ini adalah metode pabrik untuk menghasilkan masing-masing FormControl , FormGroup dan FormArray di kelas komponen.

Lihat contoh berikut: test.component.ts

import { Component } from '@angular/core';
// 1. Impor FormBuilder
impor { FormBuilder, Validator } dari '@angular/forms';

@Komponen({
  pemilih: 'uji aplikasi',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
ekspor kelas TestComponent {
	// 2. Menyuntikkan konstruktor layanan FormBuilder (fb pribadi: FormBuilder) {}
    ngOnInit() {} }

    profileForm = ini.fb.grup({
      Nama Depan: ['', [Validator.diperlukan, Validator.pola('[a-zA-Z0-9]*')]],
      Nama Belakang: ['', Validator.wajib],
    });
    // Setara dengan // profileForm = new FormGroup({
    // Nama Depan: FormControl baru('', [Validator.diperlukan,Validator.pola('[a-zA-Z0-9]*')]),
    // Nama Belakang: FormControl baru('', Validator.wajib),
    // });

    saat Kirim() {
      console.log(ini.profilForm.nilai)
      console.log(ini.profilFormulir)
    }
}

Sebagai perbandingan, dapat ditemukan bahwa menggunakan layanan FormBuilder dapat menghasilkan FormControl , FormGroup dan FormArray dengan lebih mudah tanpa harus membuat instance new secara manual setiap saat.

Validator Formulir Validator

Untuk daftar API lengkap Validators , lihat manual API

https://angular.cn/api/forms/Validators.

Fungsi validator ( Validators ) dapat berupa fungsi sinkron atau fungsi asinkron.

• Validator sinkron: Fungsi sinkron ini menerima instance kontrol dan mengembalikan serangkaian kesalahan validasi atau null. Anda dapat meneruskannya sebagai parameter kedua ke konstruktor saat membuat instance FormControl .
• Validator asinkron: Fungsi asinkron ini menerima instance kontrol dan mengembalikan Promise atau Observable , yang kemudian memunculkan serangkaian kesalahan validasi atau null. Mereka dapat diteruskan sebagai parameter ketiga saat membuat instance FormControl .

Untuk alasan kinerja, Angular tidak akan menjalankan validator asinkron sampai semua validator sinkron lulus. Kesalahan validasi ini diatur setelah setiap validator asinkron dijalankan.

Validator API kelas Validator

https://angular.cn/api/forms/Validators

validator kelas {
  static min(min: number): ValidatorFn // Nilai minimum yang diperbolehkan untuk dimasukkan static max(max: number): ValidatorFn // Nilai maksimum static yang diperlukan(kontrol: abstractControl): ValidationErrors | null // Apakah diperlukan static diperlukanTrue(kontrol: AbstrakKontrol): ValidationErrors |
  email statis(kontrol: AbstrakKontrol): ValidationErrors |.null // Apakah itu format email static minLength(minLength: number): ValidatorFn // Panjang minimum static maxLength(maxLength: number): ValidatorFn // Panjang maksimum pola statis(pola: string |.RegExp): ValidatorFn // Pencocokan reguler static nullValidator(kontrol: AbstrakControl): ValidationErrors |.null // Tidak melakukan apa pun penulisan statis(validator: ValidatorFn[]): ValidatorFn |
  static composerAsync(validator: AsyncValidatorFn[]): AsyncValidatorFn |
}

Fungsi validator bawaan

FormControl

/forms';
...
ngOnInit(): batal {
  this.heroForm = Grup Formulir baru({
  // Buat instance nama kontrol FormControl: new FormControl(this.hero.name, [
      Validators.required, // Validasi, diperlukan Validators.minLength(4), // Panjangnya tidak kurang dari 4
      bannedNameValidator(/bob/i) // Validator khusus]),
    alterEgo: FormControl baru(ini.hero.alterEgo),
    kekuatan: FormControl baru (ini.hero.kekuatan, Validator.diperlukan)
  });
}
dapatkan nama() { kembalikan ini.heroForm.get('nama');

get power() { return this.heroForm.get('power'); }

Validator khusus

Untuk konten validator khusus, silakan merujuk ke manual API

https://angular.cn/guide/form-validation

Terkadang ada yang ada di dalamnya validasi Prosesor tidak dapat memenuhi kebutuhan dengan baik. Misalnya, kita perlu memverifikasi suatu formulir dan nilai masukan hanya dapat berupa nilai dalam larik tertentu, dan nilai dalam larik ini berubah secara real time saat program dijalankan kali, validator bawaan tidak dapat memenuhi persyaratan ini, dan validator khusus perlu dibuat.

• Tambahkan validator khusus dalam formulir responsif. Pada bagian built-in validator di atas, terdapat fungsi forbiddenNameValidator sebagai berikut:

  import { Validators } from '@angular/forms';
  ...
  ngOnInit(): batal {
    this.heroForm = Grup Formulir baru({
      nama: FormControl baru(nama.pahlawan ini, [
        Validator.diperlukan,
        Validator.minLength(4),
        // 1. Tambahkan validator khusus, bannedNameValidator(/bob/i)
      ])
    });
  }
  // 2. Mengimplementasikan validator khusus yang fungsinya melarang input nilai dengan fungsi ekspor string bob bannedNameValidator(nameRe: RegExp): ValidatorFn {
    kembali (kontrol: AbstrakKontrol): ValidationErrors |.null => {
      const dilarang = nameRe.test(control.value);
      // 3. Kembalikan null ketika nilainya valid, atau kembalikan objek kesalahan verifikasi ketika tidak valid return banned ?
    };
  }

  Validator mengembalikan null jika nilainya valid, atau验证错误对象jika tidak valid. Objek kesalahan autentikasi biasanya memiliki atribut yang disebut kunci autentikasi ( forbiddenName ). Nilainya adalah kamus arbitrer yang dapat Anda gunakan untuk menyisipkan pesan kesalahan ({name}).

• Tambahkan validator khusus dalam formulir berbasis templat. Untuk menambahkan arahan ke templat, arahan tersebut berisi fungsi validator . Pada saat yang sama, arahan ini perlu mendaftarkan dirinya sebagai penyedia NG_VALIDATORS . Seperti yang ditunjukkan di bawah ini:

  // 1. Impor kelas terkait import { NG_VALIDATORS, Validator, abstractControl, ValidationErrors } from '@angular/forms';
  impor {Input} dari '@angular/core'
  
  @Direktif({
    pemilih: '[appForbiddenName]',
    // 2. Daftar sebagai penyedia penyedia token NG_VALIDATORS: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  })
  kelas ekspor ForbiddenValidatorDirective mengimplementasikan Validator {
    @Input('appForbiddenName') bannedName = '';
    // 3. Mengimplementasikan antarmuka validator, yaitu mengimplementasikan fungsi validasi validasi(kontrol: AbstrakKontrol): ValidationErrors |
    	// Kembalikan null ketika nilainya valid, atau kembalikan objek kesalahan validasi ketika tidak valid kembalikan this.forbiddenName ? bannedNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                                : batal;
    }
  }
  // 4. Fungsi verifikasi khusus fungsi ekspor bannedNameValidator(nameRe: RegExp): ValidatorFn {
    kembali (kontrol: AbstrakKontrol): ValidationErrors |.null => {
      const dilarang = nameRe.test(control.value);
      // 3. Kembalikan null ketika nilainya valid, atau kembalikan objek kesalahan verifikasi ketika tidak valid return banned ?
    };
  }

  Perhatikan bahwa arahan validasi khusus dibuat dengan useExisting dan bukan useClass . Jika useClass digunakan sebagai pengganti useExisting , instance kelas baru akan didaftarkan, namun tidak akan memiliki forbiddenName .

  <input type="text" diperlukan appForbiddenName="bob" [(ngModel)]="hero.name">