In Angular gibt es zwei Arten von Formularen:模板驱动und模型驱动. [Empfohlene verwandte Tutorials: „Angular Tutorial“]
1.1 Übersicht
控制逻辑des Formulars ist in组件模板geschrieben, die für简单Formulartypen geeignet ist.
1.2 Schneller Einstieg
1) Einführung des abhängigen Moduls FormsModule
import { FormsModule } von „@angular/forms“
@NgModule({
Importe: [FormsModule],
})
export class AppModule {} 2) Konvertieren Sie das DOM-Formular in ngForm
<form #f="ngForm" (submit)="onSubmit(f)"></form>
3) Deklarieren Sie das Formularfeld als ngModel
<form #f= " ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel /> <button>Senden</button> </form>
4). Holen Sie sich den Formularfeldwert
import { NgForm } von „@angular/forms“
Exportklasse AppComponent {
onSubmit(form: NgForm) {
console.log(form.value) // {Benutzername: ''}
}
} 5), Formulargruppierung
<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>Senden</button>
</form> { NgForm } aus „@angular/forms“ importieren
Exportklasse AppComponent {
onSubmit(form: NgForm) {
console.log(form.value) // {Kontakt: {Telefon: ''}, Benutzer:{Benutzername: ''}}
}
} 1.3 Formularvalidierung
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel erforderlich pattern="d" /> <button>Senden</button> </form>
Exportklasse AppComponent {
onSubmit(form: NgForm) {
// Überprüfen Sie, ob das gesamte Formular über console.log(form.valid) überprüft wurde.
}
} <!-- Formularübermittlung deaktivieren, wenn die Validierung des gesamten Formulars fehlschlägt --> <button type="submit" [disabled]="f.invalid">Submit</button>
zeigt die Fehlermeldung an, wenn das Formularelement in der Komponentenvorlage fehlschlägt.
<form #f="ngForm" (submit)="onSubmit(f)">
<input #username="ngModel" />
<div *ngIf="username.touched && !username.valid && username.errors">
<div *ngIf="username.errors.required">Bitte geben Sie den Benutzernamen ein</div>
<div *ngIf="username.errors.pattern">Entspricht nicht den regulären Regeln</div>
</div>
</form> Gibt den Stil an, wenn das Formularelement die Validierung nicht besteht.
input.ng-touched.ng-invalid {
Rand: 2 Pixel durchgehend rot;
} 2.1 Übersicht
控制逻辑des Formulars ist in组件类geschrieben, die mehr Kontrolle über die Verifizierungslogik hat und für复杂Formulartypen geeignet ist.
In einem modellgesteuerten Formular muss das Formularfeld eine Instanz FormControl Klasse sein. Das Instanzobjekt kann验证表单字段, ob der Wert geändert wurde usw.
Das gesamte Formular besteht aus einer Reihe von Formularfeldern, und das gesamte Formular muss eine Instanz FormGroup -Klasse sein, die整体des Formulars durchführen kann.
FormControl: ein Formularelement in einer Formulargruppe
. Das Formular ist mindestens ein FormArray
: Es kann während der Formularvalidierung ein Element im FormArray hinzufügen scheitert und das Ganze scheitert.
2.2 Schneller Einstieg
1), Einführung von ReactiveFormsModule
import { ReactiveFormsModule } from „@angular/forms“
@NgModule({
Importe: [ReactiveFormsModule]
})
export class AppModule {} 2). Erstellen Sie das FormGroup-Formularsteuerobjekt in der Komponentenklasse
import { FormControl, FormGroup } aus „@angular/forms“
Exportklasse AppComponent {
contactForm: FormGroup = new FormGroup({
Name: neues FormControl(),
Telefon: neues FormControl()
})
} 3). Formular in der zugehörigen Komponentenvorlage
<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="name" /> <input type="text" formControlName="phone" /> <button>Senden</button> </form>
4). Holen Sie sich die Formularwert-
Exportklasse AppComponent {
onSubmit() {
console.log(this.contactForm.value)
}
} 5). Legen Sie den Formular-Standardwert
contactForm fest: FormGroup = new FormGroup({
Name: neues FormControl("Standardwert"),
Telefon: neues FormControl(15888888888)
}) 6), Formulargruppierung
contactForm: FormGroup = new FormGroup({
vollständiger Name: neue FormGroup({
Vorname: neues FormControl(),
Nachname: neues FormControl()
}),
Telefon: neues 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>Senden</button>
</form> onSubmit() {
console.log(this.contactForm.value.name.username)
console.log(this.contactForm.get(["name", "username"])?.value)
} 2.3 FormArray-
Anforderungen: Auf der Seite wird standardmäßig eine Gruppe von Kontaktinformationen angezeigt. Durch Klicken auf die Schaltfläche können weitere Kontaktinformationsgruppen hinzugefügt werden.
importiere { Component, OnInit } aus „@angular/core“
importiere { FormArray, FormControl, FormGroup } aus „@angular/forms“
@Komponente({
Selektor: „app-root“,
templateUrl: „./app.component.html“,
Stile: []
})
Die Exportklasse AppComponent implementiert OnInit {
// Formular contactForm: FormGroup = new FormGroup({
Kontakte: neues FormArray([])
})
Kontakte abrufen() {
Geben Sie this.contactForm.get("contacts") als FormArray zurück
}
//Kontaktinformationen hinzufügen addContact() {
//Kontaktinformationen const myContact: FormGroup = new FormGroup({
Name: neues FormControl(),
Adresse: neues FormControl(),
Telefon: neues FormControl()
})
//Kontaktinformationen zum Kontaktinformationsarray hinzufügen this.contacts.push(myContact)
}
// Kontaktinformationen löschen removeContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
//Standardkontaktinformationen hinzufügen this.addContact()
}
onSubmit() {
console.log(this.contactForm.value)
}
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<div formArrayName="contacts">
<div
*ngFor="let contact ofcontacts.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)">Kontaktinformationen entfernen</button>
</div>
</div>
<button (click)="addContact()">Kontaktinformationen hinzufügen</button>
<button>Senden</button>
</form> 2.4 Integrierter Formularvalidator
1) Verwenden Sie die vom integrierten Validator bereitgestellten Validierungsregeln, um die Formularfelder zu validieren.
Import { FormControl, FormGroup, Validators } aus „@angular/forms“
contactForm: FormGroup = new FormGroup({
name: new FormControl("Standardwert", [
Validatoren.erforderlich,
Validators.minLength(2)
])
}) 2) Ermitteln Sie, ob das gesamte Formular die Überprüfung bestanden hat
onSubmit() {
console.log(this.contactForm.valid)
} <!-- Formularschaltflächen deaktivieren, wenn die Überprüfung des gesamten Formulars fehlschlägt --> <button [disabled]="contactForm.invalid">Senden</button>
3). Zeigt die Fehlermeldung an, wenn die Überprüfung in der Komponentenvorlage
get name() { bestanden wurde.
gib this.contactForm.get("name") zurück!
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<input type="text" formControlName="name" />
<div *ngIf="name.touched && name.invalid && name.errors">
<div *ngIf="name.errors.required">Bitte geben Sie Ihren Namen ein</div>
<div *ngIf="name.errors.maxlength">
Die Namenslänge darf nicht größer als {{ name.errors.maxlength.requiredLength }} sein. Die tatsächliche Länge beträgt {{ name.errors.maxlength.actualLength }}.
</div>
</div>
</form> 2.5 Benutzerdefinierter synchroner Formularvalidator
Der Typ des benutzerdefinierten Validators ist die TypeScript-Klasse
. Die Klasse enthält spezifische Überprüfungsmethoden. Die Überprüfungsmethode muss
eine Parametersteuerung vom Typ AbstractControl sein. Tatsächlich handelt es sich um den Typ des Instanzobjekts der FormControl-Klasse.
Wenn die Überprüfung fehlschlägt
, ist das Objekt die Überprüfungsidentifikation und der Wert true, was darauf hinweist, dass die Überprüfung fehlgeschlagen ist.
Der Rückgabewert der Überprüfungsmethode ist ValidationErrors | null
import { AbstractControl, ValidationErrors } von „@angular/forms“.
Exportklasse NameValidators {
// Feldwerte dürfen keine Leerzeichen enthalten static canContainSpace(control: AbstractControl): ValidationErrors |.
// Überprüfung fehlgeschlagen, wenn (/s/.test(control.value)) return { canContainSpace: true }
//Verifizierung bestanden, return null
}
} { NameValidators } aus „./Name.validators“ importieren
contactForm: FormGroup = new FormGroup({
Name: neues FormControl("", [
Validatoren.erforderlich,
NameValidators.cannotContainSpace
])
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.cannotContainSpace">Name darf keine Leerzeichen enthalten</div> </div>
2.6 Benutzerdefinierter asynchroner Formularvalidator-
Import { AbstractControl, ValidationErrors } aus „@angular/forms“
importiere { Observable } aus „rxjs“
Exportklasse NameValidators {
static ShouldBeUnique(control: AbstractControl): Promise<ValidationErrors |.
neues Versprechen zurückgeben(resolve => {
if (control.value == "admin") {
lösen({ ShouldBeUnique: true })
} anders {
auflösen(null)
}
})
}
} contactForm: FormGroup = new FormGroup({
Name: neues FormControl(
"",
[
Validatoren.erforderlich
],
NameValidators.shouldBeUnique
)
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.shouldBeUnique">Doppelter Benutzername</div> </div> <div *ngIf="name.pending">Erkennen, ob Namen Duplikate sind</div>
2.7 FormBuilder-
快捷zum Erstellen eines Formulars.
this.fb.control : Formularelement
this.fb.group : Formulargruppe, das Formular ist mindestens eine FormGroup.
this.fb.array : Wird für komplexe Formulare verwendet. Sie können dort während der Formularvalidierung dynamisch Formularelemente oder Formulargruppen hinzufügen ist ein FormArray. Das Element ist fehlgeschlagen, und das Ganze ist fehlgeschlagen.
importiere { FormBuilder, FormGroup, Validators } aus „@angular/forms“
Exportklasse AppComponent {
contactForm: FormGroup
Konstruktor(private fb: FormBuilder) {
this.contactForm = this.fb.group({
vollständiger Name: this.fb.group({
Vorname: ["", [Validators.required]],
Nachname: [""]
}),
Telefon: []
})
}
} 2.8 Überwachen von Änderungen in Formularwerten
Bei der tatsächlichen Arbeit müssen wir häufig eine entsprechende Verarbeitung basierend auf Änderungen in einem Formularwert durchführen. Im Allgemeinen können wir ngModalChange oder ein Formular verwenden, um
2.8.1 ngModalChange
<div>zu erreichen
<input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" /> </div>
import { FormControl, FormGroup } aus „@angular/forms“
Exportklasse AppComponent {
öffentlicher Name = 'a';
öffentlicher NameChange() {
}
} Angular empfiehlt offiziell nicht die Verwendung von ngModalChange.
2.8.2 Formularsteuerung
<div [formGroup]="contactForm"> <input type="text" formControlName="name" /> </div>
import { FormControl, FormGroup } aus „@angular/forms“
Exportklasse AppComponent {
contactForm: FormGroup = new FormGroup({
Name: neues FormControl()
})
ngOnInt() {
this.contactForm.get("name").valueChanges.subscribe(data => {
console.log(data);
}
}
} 2.9 Übung
1), Holen Sie sich den ausgewählten Wert in einer Gruppe von Kontrollkästchen
<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="let item of Data">
<input type="checkbox" [value]="item.value" (change)="onChange($event)" />
{{ item.name }}
</label>
<button>Senden</button>
</form> { Component } aus „@angular/core“ importieren
importiere { FormArray, FormBuilder, FormGroup } aus „@angular/forms“
Schnittstellendaten {
Name: Zeichenfolge
Wert: Zeichenfolge
}
@Komponente({
Selektor: „App-Checkbox“,
templateUrl: „./checkbox.component.html“,
Stile: []
})
Exportklasse CheckboxComponent {
Daten: Array<Daten> = [
{ Name: „Birne“, Wert: „Birne“ },
{ Name: „Plum“, Wert: „Plum“ },
{ Name: „Kiwi“, Wert: „Kiwi“ },
{ Name: „Apple“, Wert: „Apple“ },
{ Name: „Lime“, Wert: „Lime“ }
]
Formular: FormGroup
Konstruktor(private fb: FormBuilder) {
this.form = this.fb.group({
checkArray: this.fb.array([])
})
}
onChange(event: Event) {
const target = event.target als HTMLInputElement
const geprüft = target.checked
const value = target.value
const checkArray = this.form.get("checkArray") als FormArray
wenn (markiert) {
checkArray.push(this.fb.control(value))
} anders {
const index = checkArray.controls.findIndex(
control => control.value === Wert
)
checkArray.removeAt(index)
}
}
onSubmit() {
console.log(this.form.value)
}
} 2). Rufen Sie den im Optionsfeld
Exportklasse AppComponent { ausgewählten Wert ab.
Formular: FormGroup
Konstruktor(öffentliche 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" /> Männlich <input type="radio" value="female" formControlName="gender" /> Weiblich <button type="submit">Senden</button> </form>
2.10 Andere
patchValue: Legen Sie den Wert des Formularsteuerelements fest (Sie können alle festlegen, oder Sie können einen davon festlegen, die anderen sind nicht betroffen)
setValue: Legen Sie den Wert des Formularsteuerelements fest (alle festlegen, nicht ausschließen). beliebig)
valueChanges: Wenn sich das Formular ändert. Das Reset-Ereignis wird ausgelöst, wenn sich der Wert des Steuerelements ändert
: Der Formularinhalt wird ausgeblendet