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',
            },
          },
        },
  • 相关阅读:
    bzoj2599
    在Linux下配置jdk的环境变量
    liunx 命令大全
    Liunx下如何使用kettle
    Liunx 解压篇
    Linux下安装MySQL-5.7
    Linux文件权限查看及修改命令chmod,chown
    spring 驱动模式
    Struts2标签之Checkbox
    spring 注解的优点缺点
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172275.html
Copyright © 2011-2022 走看看