zoukankan      html  css  js  c++  java
  • [ngx-formly] Customize Angular Formly validation messages

    When you display error messages you want to make them as understandable as possible such that the user is able to figure out the problem. Example: the error message of a min validator should ideally contain the actual number and the min number allowed. So the message could be like "You have to enter a number bigger than X. You entered Y". Let's see how Formly allows us to display such highly customizable messages.

    // app.module.ts
    
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { ReactiveFormsModule } from '@angular/forms';
    import { FormlyModule, FormlyFieldConfig } from '@ngx-formly/core';
    import { FormlyMaterialModule } from '@ngx-formly/material';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    import { SharedModule } from './shared/shared.module';
    import { DebugComponent } from './shared/debug.component';
    
    // 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}`;
    }
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        SharedModule,
        ReactiveFormsModule,
        FormlyModule.forRoot({
          validationMessages: [
            {
              name: 'required',
              message: 'This field is required',
            },
            {
              name: 'min',
              message: minValidationMessage,
            },
          ],
        }),
        FormlyMaterialModule,
        BrowserAnimationsModule,
      ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
        {
          key: 'age',
          type: 'input',
          templateOptions: {
            type: 'number',
            label: 'Age',
            min: 18, // use global min error message
          },
          // override the global min error message
          validation: {
            messages: {
              min: 'Sorry, you have to be older than 18',
            },
          },
        },
  • 相关阅读:
    JS转义 escape()、encodeURI()、encodeURIComponent()区别详解
    PHP解决搜索时在URL地址栏输入中文字符搜索结果出现乱码
    CMSPRESS-PHP无限级分类2
    CMSPRESS-PHP无限级分类
    HTML5-CSS3-JavaScript(3)
    HTML5-CSS3-JavaScript(2)
    HTML5-CSS3-JavaScript(1)
    CSS3-Hover 效果 展示
    JAVA Socket地址绑定
    JAVA Socket无参构造方法的使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172275.html
Copyright © 2011-2022 走看看