In diesem Artikel erfahren Sie, wie Sie ein reaktives Formular in einer plattformübergreifenden Anwendung erstellen, die einen auf dem RxWeb-Modell basierenden Ansatz zum Erstellen und Validieren des Formulars verwendet
Eine effiziente Möglichkeit, die Leistungsfähigkeit einer Unternehmensanwendung mithilfe eines gut gestalteten Formulars mit geeigneten Eingabevalidierungen zu erhöhen
Der folgende Fall beschreibt einen Anwendungsfall, bei dem die Benutzerregistrierung drei Felder „Vorname“, „Nachname“ und „E-Mail-Adresse“ enthält und alle diese Dinge für den Registrierungsprozess obligatorisch sind
Verwenden Sie einen eleganten Ansatz, um dieses Formular auf einfache Weise zu erstellen, ohne viel komplizierte Geschäftslogik zu schreiben, die in der Komponente enthalten ist
Dies kann erreicht werden mit @rxweb/reactive-form-validators das einen Ansatz zum Entwerfen eines modellbasierten Validierungsformulars hat und viele nützliche eingebaute Validierungen wie Unique, Choice, Compare usw.
Modellbasierte Formulare enthalten eine Modellklasse mit den initialisierten Eigenschaften unter Verwendung von Prüfern, die verwendet werden, um das Formular in der auf Modell, Komponente und HTML basierenden Architektur zu erstellen.
Weitere Informationen zu modellgesteuerten Formularen finden Sie unter Vereinfachte eckige reaktive Formen
Beginnen Sie mit der Installation des rxweb-Pakets aus dem npm mit dem folgenden Befehl:
npm i @rxweb/reactive-form-validators
Registrieren Sie die RxReactiveFormsModule Modul wie folgt im root(App)-Modul:
@NgModule({ declarations: [AppComponent,UserComponent], entryComponents: [], imports: [BrowserModule,RxReactiveFormsModule, CommonModule,FormsModule, ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent]
})
export class AppModule {}
Beginnen wir mit der Implementierung, indem wir eine Modellklasse erstellen
Dieses Modell enthält eine Klasse Named User mit den erforderlichen Eigenschaften, in denen die Annotation von den rxweb-Validatoren verwendet wird, wobei das Modell eine oder mehrere Annotationen enthalten kann
import { required } from '@rxweb/reactive-form-validators'; export class User { @required() firstName: string; @required() lastName: string; @required() Email: string;
}
Unter Verwendung des obigen Modells wird die FormGroup unter Verwendung von gebunden formGroup Methode der RxFormBuilder die für die Bildung der userFormGroup verantwortlich ist, wie unten im Code erwähnt. Die FormGroup, die aus den Eigenschaften des Benutzermodells als FormControl zusammen mit den angewendeten Validierungen besteht.
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { User } from './user.model'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss'],
})
export class UserComponent implements OnInit { userFormGroup : FormGroup constructor(private formBuilder: RxFormBuilder) { } ngOnInit() { this.userFormGroup = this.formBuilder.formGroup(User); } userRegistrationFormGroupSubmit() { console.log(this.userFormGroup.getRawValue()); }
} Da wir das ionische Framework verwenden, das für die Entwicklung hybrider plattformübergreifender Anwendungen verwendet wird, werden wir die ion-Tags verwenden, um es sowohl für Mobilgeräte als auch für das Web kompatibel zu machen.
Hier werden die Validierungsmeldungen von der in der App global konfigurierten Komponente während der Initialisierung der Anwendung wie folgt angezeigt
initializeApp() { ReactiveFormConfig.set({"validationMessage":{"required":"This field is required."}}); this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); }); }
Der HTML-Code:
<ion-header> <ion-toolbar color="primary"> <ion-title> Ionic Rxweb Reactive Form Validators </ion-title> </ion-toolbar>
</ion-header>
<ion-content> <ion-card> <ion-card-content> <form [formGroup]="userFormGroup" novalidate (ngSubmit)="userFormGroupSubmit()"> <ion-list> <ion-item-divider color="primary">User Profile Info</ion-item-divider> <br> <ion-item-divider color="light"> <ion-label> General </ion-label> </ion-item-divider> <ion-item [class.has-error]="(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched"> <ion-label position="floating">FirstName *</ion-label> <ion-input type="text" formControlName="firstName"></ion-input> </ion-item> <ion-item lines="none" *ngIf="(userFormGroup.get('firstName').hasError('required') || userFormGroup.get('firstName').hasError('required')) && userFormGroup.get('firstName').touched"> <div class="error-message"> <small *ngIf="userFormGroup.get('firstName').hasError('required')"> {{ userFormGroup.controls.firstName.errors.required.message}}.<br /></small> </div> </ion-item> <ion-item [class.has-error]="(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched"> <ion-label position="floating">LastName *</ion-label> <ion-input type="text" formControlName="lastName"></ion-input> </ion-item> <ion-item lines="none" *ngIf="(userFormGroup.get('lastName').hasError('required') || userFormGroup.get('lastName').hasError('required')) && userFormGroup.get('lastName').touched"> <div class="error-message"> <small *ngIf="userFormGroup.get('lastName').hasError('required')"> {{ userFormGroup.controls.lastName.errors.required.message}}.<br /></small> </div> </ion-item> <ion-item [class.has-error]="(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched"> <ion-label position="floating">Email *</ion-label> <ion-input type="email" formControlName="Email"></ion-input> </ion-item> <ion-item lines="none" *ngIf="(userFormGroup.get('Email').hasError('required') || userFormGroup.get('Email').hasError('required')) && userFormGroup.get('Email').touched"> <div class="error-message"> <small *ngIf="userFormGroup.get('Email').hasError('required')">{{ userFormGroup.controls['Email'].errors.required.message}}.<br /></small> </div> </ion-item> <ion-row no-padding justify-content-center> <ion-col col-auto text-right> <ion-button [disabled]='!userFormGroup.valid' type="submit" fill="clear" size="small" color="primary"> <ion-icon name='send' slot="start"></ion-icon> Send </ion-button> </ion-col> </ion-row> </ion-list> </form> </ion-card-content> </ion-card>
</ion-content> Das obige Bild zeigt die Ausgabe nach Abschluss des folgenden Prozesses
In diesem Artikel haben wir gelernt, ein modellbasiertes reaktives Formular zu erstellen und den modellgetriebenen Ansatz zusammen mit der Integration von** RxWeb**-Validierungen in eine ionische Anwendung zu verwenden.
- SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
- Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
- Quelle: https://www.codementor.io/ushmidave905/how-to-make-ionic-reactive-forms-using-rxweb-1d28ybqmfl
