RxWeb คืออะไร
An Open-Source Architecture
for Web Applications in Angular & Vue & .Net Core
DOMAIN-DRIVEN DESIGN | SERVERLESS | MICROSERVICES | RESTFUL
Goal
Provides all type of clientside validations.
Easy way to create Angular Reactive Form Group & Template Driven Form Validation with less lines of code & clean code.
Easy to create Dynamic Reactive Form / Template Driven Form.
การ Validate forms ปกติใน Angular
/** app.module.ts */ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } /** app.component.ts */ import { FormBuilder, FormGroup } from '@angular/forms'; export class AppComponent implements OnInit { myForm!: FormGroup; constructor(private formBuilder: FormBuilder) { } ... ngOnInit(): void { this.myForm = this.formBuilder.group({ name: [null, [Validators.required]], lastName: [null, [Validators.required]], age: [null, [Validators.required]] }) } } โค้ดมารวมกันที่อยู่ component อาจจะทำให้ไม่ clean code และ less code ได้
<!-- app.component.html --> <form [formGroup]="myForm"> Name: <input type="text" formControlName="name"> <label>{{myForm.get('name').errors}}</label> LastName: <input type="text" formControlName="lastName"> <label>{{myForm.get('lastName').errors}}</label> Ager: <input type="text" formControlName="age"> <label>{{myForm.get('age').errors}}</label> </form> มาดูการ Validate form แบบใหม่ ด้วย RxWeb
$ npm install @rxweb/reactive-form-validators
/** app.module.ts */ import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, RxReactiveFormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } สร้าง models เพื่อใช้การทำ validate forms
/** models/user.model.ts*/ import { minLength, required } from "@rxweb/reactive-form-validators"; export class UserModel { @required() @minLength({ value: 5 }) userName: string; @required() lastName: string; @required() age: number; ... } แยกโค้ดให้ไป validate โดยการใช้ models ทำให้ code clean & less code มากขึ้น filling look like Java, Nestjs โดยการใช้ class validator decorator มาใช้แทนที่จะเขียน รวมอยู่ใน component เดียวกัน
เริ่มผูก models เข้ากับ formGroup
/** app.component.ts */ import { FormGroup } from '@angular/forms'; import { RxFormBuilder } from '@rxweb/reactive-form-validators'; import { UserModel } from './models/user.model'; export class AppComponent implements OnInit { myForm!: FormGroup; constructor(private formBuilder: RxFormBuilder) { } ... ngOnInit(): void { let user = new UserModel(); this.userForm = this.formBuilder.formGroup(user); } } ดูจาก function ngOnInit() ทำให้ดู clean code & less code มาก
Config validationMessage
/** app.component.ts */ import { ReactiveFormConfig } from '@rxweb/reactive-form-validators'; ... export class AppComponent implements OnInit { myForm!: FormGroup; constructor(private formBuilder: RxFormBuilder) { } ... ngOnInit(): void { ReactiveFormConfig.set({ validationMessage: { required: "This field is required", minLength: "minimum length is {{1}}", } }); let user = new UserModel(); this.userForm = this.formBuilder.formGroup(user); } } เราสามารถ custom error message มาเพื่อแสดง error message หรือจะเขียนแยกไว้แล้วค่อยมาใช้งานก็ได้
แสดง errorMessage ที่ html template
<!-- app.component.html --> <form [formGroup]="myForm"> Name: <input type="text" formControlName="name"> <label> {{ userForm?.controls?.name["errorMessage"]}}</label> LastName: <input type="text" formControlName="lastName"> <label>{{ userForm?.controls?.lastName["errorMessage"]}}</label> Ager: <input type="text" formControlName="age"> <label>{{ userForm?.controls?.age["errorMessage"]}}</label> </form> Benefit
เราสามารถทำ Group หรือทำ Array Group เพื่อให้ Validate forms แบบ complex รวมไปถึงการ reused ในต่าง component ได้แบบสบายๆ