码迷,mamicode.com
首页 > 其他好文 > 详细

[ngx-formly] Implement cross-cutting functionality with Angular Formly Extensions

时间:2020-01-09 20:58:58      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:nal   cut   tac   bootstra   man   pop   rri   export   str   

Assume we want to add a data-cy attribute to all of our form controls. We need this as a hook to later be able to easily grab our input fields from within our Cypress integration tests. Of course we could manually add these data- attributes to each of our formly field configuration. But there‘s a much more elegant approach: extensions. In this lesson we‘re going to see how they work.

 

customs/data-cy.extension.ts:

import { FormlyExtension, FormlyFieldConfig } from @ngx-formly/core;

export const dataCyExtension: FormlyExtension = {
  prePopulate(field: FormlyFieldConfig) {
    field.templateOptions = {
      ...(field.templateOptions || {}),
      attributes: {
        data-cy: field.key,
      },
    };
  },
};

 

app.modules.ts:

import { BrowserModule } from @angular/platform-browser;
import { NgModule } from @angular/core;

import { AppComponent } from ./app.component;
import { ReactiveFormsModule, FormControl, ValidationErrors } from @angular/forms;
import { FormlyModule, FormlyFieldConfig } from @ngx-formly/core;
import { FormlyMaterialModule } from @ngx-formly/material;
import { BrowserAnimationsModule } from @angular/platform-browser/animations;
import { NgSelectModule } from @ng-select/ng-select;

import { SharedModule } from ./shared/shared.module;
import { NgSelectFormlyComponent } from ./customs/ng-select.type;
import { dataCyExtension } from ./customs/data-cy.extension;

// global min error message, you can override by validation.messages.min in field
export function minValidationMessage(err, field: FormlyFieldConfig) {
  return `Please provide a value bigger than ${err.min}. You provided ${err.actual}`;
}

export function ipValidationMessage(err, field: FormlyFieldConfig) {
  return `"${field.formControl.value}" is not a valid IP address`;
}

export function IpValidator(control: FormControl): ValidationErrors {
  return !control.value || /(\d{1,3}\.){3}\d{1,3}/.test(control.value) ? null : { ip: true };
}

@NgModule({
  declarations: [AppComponent, NgSelectFormlyComponent],
  imports: [
    BrowserModule,
    SharedModule,
    NgSelectModule,
    ReactiveFormsModule,
    FormlyModule.forRoot({
      validators: [
        {
          name: ip,
          validation: IpValidator,
        },
      ],
      validationMessages: [
        {
          name: required,
          message: This field is required,
        },
        {
          name: min,
          message: minValidationMessage,
        },
        {
          name: ip,
          message: ipValidationMessage,
        },
      ],
      types: [
        {
          name: my-autocomplete,
          component: NgSelectFormlyComponent,
        },
      ],
      extensions: [
        {
          name: data-cy-extension,
          extension: dataCyExtension,
        },
      ],
    }),
    FormlyMaterialModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

Then all the fileds will get ‘data-cy‘ attr

 

[ngx-formly] Implement cross-cutting functionality with Angular Formly Extensions

标签:nal   cut   tac   bootstra   man   pop   rri   export   str   

原文地址:https://www.cnblogs.com/Answer1215/p/12173129.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!