角度11 +新しい方法フォームの検証RXweb

RXwebคืออะไร
オープンソースアーキテクチャ
アングルとVueのウェブアプリケーションのために.ネットコア
Domain - Driving Designは、Serverlessな

ゴール
すべての種類のクライアント側の検証を提供します.
簡単な方法は、コード＆クリーンコードの以下の行で角度反応フォームグループ＆テンプレート駆動フォームの検証を作成します.
簡単に動的反応フォーム/テンプレート駆動フォームを作成する.

การ フォームの検証ปกติใน 角度

/** 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]]
    })
  }
}

โค้ดมารวมกันที่อยู่ コンポーネントอาจจะทำให้ไม่ クリーンコードและ 以下のコードได้

<!-- 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>

มาดูการ フォームの検証แบบใหม่ ด้วย 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/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;

  ...
}

แยกโค้ดให้ไป 検証するโดยการใช้ モデルทำให้ コードクリーン＆コードมากขึ้น 充填はJavaのように見えますโดยการใช้ クラスバリレータデコレータมาใช้แทนที่จะเขียน รวมอยู่ใน コンポーネントเดียวกัน

เริ่มผูก モデルเข้ากับ フォルグループ

/** 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);
  }
}

ดูจาก 関数ngoninit ()ทำให้ดู クリーンコード＆コードมาก

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);
  }
}

เราสามารถ カスタムエラーメッセージมาเพื่อแสดง エラーメッセージหรือจะเขียนแยกไว้แล้วค่อยมาใช้งานก็ได้

แสดง エラーメッセージที่ HTMLテンプレート

<!-- 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>

利益
เราสามารถทำ グループหรือทำ アレイグループเพื่อให้ フォームの検証แบบ 複合体รวมไปถึงการ 再利用ในต่าง コンポーネントได้แบบสบายๆ

ศึกษาข้อมูลเพิ่มได้ที่
https://docs.rxweb.io/getting-start

การ 検証するแบบเดียวกัน バックエンド

NestJSクラスの検証
https://www.npmjs.com/package/class-validator

Javaビーンの妥当性検査
https://docs.oracle.com/javaee/7/tutorial/bean-validation001.htm