Pada artikel ini kita mempelajari cara membuat formulir reaktif dalam aplikasi lintas platform yang menggunakan pendekatan berbasis model RxWeb untuk membuat dan memvalidasi formulir.
Cara yang efisien untuk meningkatkan kemampuan aplikasi perusahaan menggunakan formulir yang dirancang dengan baik dengan validasi input yang tepat
Kasus di bawah ini menjelaskan kasus penggunaan di mana pendaftaran pengguna di mana terdapat tiga bidang Nama Depan, Nama Belakang dan alamat email dan semua hal ini wajib untuk proses pendaftaran
Untuk menggunakan pendekatan elegan untuk membangun formulir ini dengan cara yang sederhana tanpa menulis banyak logika bisnis yang rumit yang terlibat dalam komponen
Ini dapat dicapai dengan menggunakan @rxweb/reaktif-form-validator yang memiliki pendekatan untuk merancang formulir validasi berbasis model dan memiliki banyak validasi bawaan yang berguna seperti unik, pilihan, bandingkan, dll...
Formulir Berbasis Model berisi kelas model yang memiliki properti yang diinisialisasi menggunakan validator yang digunakan untuk membangun formulir dalam arsitektur berbasis model, komponen, dan HTML.
Untuk informasi lebih lanjut tentang formulir yang digerakkan oleh model, silakan lihat Bentuk Reaktif Sudut Sederhana
Mulailah dengan menginstal paket rxweb dari npm menggunakan perintah di bawah ini:
npm saya @rxweb/reactive-form-validators
Daftarkan RxReactiveFormsModule modul seperti di bawah ini dalam modul root (Aplikasi):
@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 {}
Mari kita mulai implementasinya dengan membuat kelas model
Model ini berisi kelas Named User dengan properti yang diperlukan di mana anotasi digunakan dari validator rxweb, dalam model ini dapat berisi satu atau lebih anotasi
import { required } from '@rxweb/reactive-form-validators'; export class User { @required() firstName: string; @required() lastName: string; @required() Email: string;
}
Menggunakan model di atas, FormGroup diikat menggunakan formGroup metode dari RxFormBuilder yang bertanggung jawab untuk pembentukan userFormGroup seperti yang disebutkan di bawah ini dalam kode. FormGroup yang terdiri dari properti model pengguna sebagai FormControl bersama dengan validasi yang diterapkan.
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()); }
} Karena kami menggunakan kerangka ionik yang digunakan untuk pengembangan aplikasi lintas platform hibrida di mana kami akan menggunakan tag ion untuk membuatnya kompatibel untuk seluler dan web.
Di sini pesan validasi ditampilkan dari komponen aplikasi yang dikonfigurasi secara global selama inisialisasi aplikasi seperti di bawah ini
initializeApp() { ReactiveFormConfig.set({"validationMessage":{"required":"This field is required."}}); this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); }); }
Kode HTML-nya:
<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> Gambar di atas menampilkan output setelah menyelesaikan proses berikut:
Dalam artikel ini kita belajar membuat bentuk reaktif berbasis model dan menggunakan pendekatan berbasis model bersama dengan integrasi validasi ** RxWeb** dalam aplikasi ionik.
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
- Sumber: https://www.codementor.io/ushmidave905/how-to-make-ionic-reactive-forms-using-rxweb-1d28ybqmfl
