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',
            },
          },
        },
  • 相关阅读:
    jmeter_响应断言与xpath assertion
    jmeter查看结果树_各种方式
    HTTP request/respond详解及响应状态码
    LINUX常用命令笔记1
    什么是接口以及接口测试
    jmeter关联——正则表达式笔记
    BeautifulReport报告
    小白笔记:Git入门之常见命令
    Apache+Php+Mysql配置
    linux搭建jenkins+github详细步骤
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172275.html
Copyright © 2011-2022 走看看