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',
            },
          },
        },
  • 相关阅读:
    从读者角度来看Blog
    NDuiker项目第3天
    IssueVision的List控件源码分析
    测试一个网站的想法
    IssueVision的PaneCaption控件源码分析
    技术研究的时候不要忘了“集成创新”
    人脸识别活体检测之张张嘴和眨眨眼
    jsp>Session 小强斋
    jsp>Request对象 小强斋
    jsp>四种作用域 小强斋
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12172275.html
Copyright © 2011-2022 走看看