[NGX-formly]角度Formly拡張とクロスカッティング機能を実装

私たちは追加したいと仮定し data-cy 、当社のフォームコントロールのすべての属性を。私たちは、後で簡単に私たちの中から、当社の入力フィールドをつかむことができるようにするためのフックとしてこれを必要とするサイプレスの統合テスト。もちろん、私たちは手動でこれらの追加することができ data- 、当社のformlyフィールド構成のそれぞれに属性を。拡張子：しかし、はるかにエレガントなアプローチがあります。このレッスンでは、我々は、彼らがどのように機能するかを見るつもりです。

関税/データcy.extension.ts：

インポート{FormlyExtension、FormlyFieldConfig} から ' @ NGX-formly /コア' 。

輸出のconst dataCyExtension：FormlyExtension = {
  事前移入（フィールド：FormlyFieldConfig）{
    field.templateOptions = {
      ...（field.templateOptions || {}）、
      属性：{
        ' データ-CY ' ：field.key、
      }、
    }。
  }、
}。

app.modules.ts：

インポート{BrowserModule} から 「@角度/プラットフォームブラウザ」。
インポート{NgModule} から 「@角度/コア」。

インポート{AppComponent} から ' ./app.component ' 。
インポート{ReactiveFormsModule、FormControl、によりvalidationErrors} から ' 角度/フォーム@ ' 。
インポート{FormlyModule、FormlyFieldConfig} から ' @ NGX-formly /コア' 。
インポート{FormlyMaterialModule} から ' @ NGX-formly /材料' 。
インポート{BrowserAnimationsModule} から 「@角度/プラットフォームブラウザ/アニメーション」。
インポート} {NgSelectModule から ' 選択/選択-A @ ' 。

インポート{SharedModule} から ' ./shared/shared.module ' 。
インポート{NgSelectFormlyComponent} から ' ./customs/ng-select.type ' 。
インポート{dataCyExtension} から ' ./customs/data-cy.extension ' 。

// グローバル分のエラーメッセージは、フィールドにvalidation.messages.minによって上書きすることができます
エクスポート機能minValidationMessage（ERR、フィールド：FormlyFieldConfig）{
   リターンは`$ {} err.minよりも大きな値を入力してください。あなたは`{err.actual} $を提供します。
}

エクスポート機能ipValidationMessage（ERR、フィールド：FormlyFieldConfig）{
  リターン ` " $ {field.formControl.valueは} "  である有効なIP address`ません。
}

エクスポート機能IpValidator（コントロール：FormControl）：によりvalidationErrors {
  リターン！control.value || /（\ D { 1、3 } \。）{ 3 } \ D { 1、3 } /。試験（control.value）？ヌル：{IP：真}。
}

@NgModule（{
  宣言：[AppComponent、NgSelectFormlyComponent]、
  輸入：[
    BrowserModule、
    SharedModule、
    NgSelectModule、
    ReactiveFormsModule、
    FormlyModule.forRoot（{
      バリ：[
        {
          名前：' IP ' 、
          検証：IpValidator、
        }、
      ]、
      validationMessages：[
        {
          名前：「必要」、
          メッセージ：「このフィールドは必須です」、
        }、
        {
          名前：「分」、
          メッセージ：minValidationMessage、
        }、
        {
          名前：' IP ' 、
          メッセージ：ipValidationMessage、
        }、
      ]、
      タイプ： [
        {
          名前：「私の-オートコンプリート」、
          コンポーネント：NgSelectFormlyComponent、
        }、
      ]、
      拡張子：[
        {
          名前：' データ-CY-拡張' 、
          拡張子：dataCyExtension、
        }、
      ]、
    }）、
    FormlyMaterialModule、
    BrowserAnimationsModule、
  ]、
  プロバイダ：[]、
  ブートストラップ：[AppComponent]、
}）
エクスポートクラス AppModule {}

その後、すべてのfileds「は、データ-CY」のattrを取得します

[NGX-formly]角度Formly拡張とクロスカッティング機能を実装

おすすめ