ich die ReactiveFormsModule empfehlen die Verwendung, wenn Arbeiten mit Formularen. Wenn Sie nicht damit vertraut sind, dann schauen Sie in der Dokumentation nach, aber es sollte kein großes Problem darstellen, da es sehr einfach ist.
form: FormGroup;
constructor(formBuilder: FormBuilder){
this.form = formBuilder.group({
name: ['', Validators.required],
lastName: '',
email: ['', [Validators.required, Validators.email]]
});
}
Also im Grunde, was hier passiert ist, dass wir eine FormGroup Instanz müssen, wenn sie mit reaktiven Formen arbeiten. Wir verwenden die Klasse FormBuilder und rufen ihre group-Methode auf, die ein Objekt des Formulars übernimmt, das wir erstellen möchten, und gibt die FormGroup-Instanz zurück. Jede Eigenschaft des übergebenen Objekts wird dann als FormControls FormControls bezeichnet. In diesem Beispiel deklarieren wir eine FormGroup mit drei FormControls, die als Name, Nachname und E-Mail-Adresse bekannt sind.
Der Wert dieser FormControls wird für die Initialisierung verwendet und kann entweder der tatsächliche Wert für dieses FormControl oder ein Array sein, wobei das erste Element den Wert dieses FormControl und das zweite entweder ValidatorFn oder ein Array von ValidatorFn.
Wie Sie sehen, haben wir den Namen FormControl wie folgt definiert: name: ['', Validators.required] was bedeutet, dass der Anfangswert eine leere Zeichenfolge ist und dieses FormControl erforderlich sein wird. Der Nachname ist einfach eine leere Zeichenfolge, weil wir keine Validierung für dieses Feld wünschen. Die E-Mail ist interessanter, da dieses FormControl mehr als einen Validator benötigt, also übergeben wir ihm ein Array.
Und jetzt, in unserem Template alle diese Umsetzung ist recht einfach und
<form [formGroup]="form">
<div>
<input formControlName="email">
<div *ngIf="form.get('email').hasError('required') && form.get('email').touched">This field is required</div>
<div *ngIf="form.get('email').hasError('email') && form.get('email').touched">Invalid email format.</div>
</div>
...
Und wenn Sie nicht wollen, damit der Benutzer der Lage sein, das Formular abzusenden, bis sie gültig ist: <button [disabled]="form.invalid">Save</button
Wie geschrieben, ist diese Frage ziemlich breit. Das Hinzufügen eines Beispiels für ein Formular, mit dem Sie gerade arbeiten, könnte hilfreich sein. Angular verfügt über ein Dokument mit Beispielen zur Formularvalidierung: https://angular.io/guide/form-validation. Hoffe, das hilft dir beim Einstieg. – stealththeninja
@stealththeninja das nicht nur Validierung. Ich muss Felder validieren und gleichzeitig muss ich das gültige Feld nur in db speichern. Eine Sache, die ich tun kann, ist zu überprüfen, dass jedes Feld gültig ist oder nicht, bevor Sie speichern, ich denke nicht, dass das eine gute Idee ist. Irgendwelche anderen Vorschläge? – Team
Ich schlage vor, ein minimales, vollständiges, überprüfbares Beispiel zu erstellen: https://stackoverflow.com/help/mcve. Abgesehen davon raten wir, was Sie erstellen und wiederholen oder mit Angular-Dokumenten verknüpfen möchten. – stealththeninja