nz-form, nzAutoTips: proposal to allow message-arguments in these tips

[rehdie]

What problem does this feature solve?

Allow autoTips to contain values from the validation-Errors.

For example:

If a form-control has a validator of type Validators.max(65535), it is currently not possible, to add the 65535 into the autoTip, if validation fails.

What does the proposed API look like?

One solution could be: in addition to a Record<string, Record<string, string>> allow a function as a value for the nzAutoTip in NzFormDirective. It may look like this:

export type NzAutoTips = Record<string, Record<string, string>> | (localeId: string, errorKey: string, error: any) => string;

...
export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
   ...
   @Input() @WithConfig() nzAutoTips: NzAutoTips = {};
}

and in the NzFormControlComponent:

 ...
 @Input() nzAutoTips: NzAutoTips;
 ...

 private updateAutoErrorTip(): void {
    if (this.validateControl) {
      const errors = this.validateControl.errors || {};
      let autoErrorTip = '';
      for (const key in errors) {
        if (errors.hasOwnProperty(key)) {
          autoErrorTip =
            errors[key]?.[this.localeId] ??
            this.getAutoTip(this.nzAutoTips, key, errors[key]) ??
            this.nzAutoTips.default?.[key] ??
            this.getAutoTip(this.nzFormDirective, key, errors[key]) ??
            this.nzFormDirective?.nzAutoTips.default?.[key];            
        }
        if (!!autoErrorTip) {
          break;
        }
      }
      this.autoErrorTip = autoErrorTip;
    }
  }

  private getAutoTip(autoTips: NzAutoTips | undefined, key: string, error: any): string {
    if (typeof autoTips === "function") {
        return autoTips(this.localeId, key, error);
    } else {
        return autoTips?.[this.localeId]?.[key];
    }
  }

This way the user of NG ZORRO has full flexibility how to retrieve the messages for nzAutoTips.

A simple function to retrieve the error message for the autoTips may look like this:

const AUTO_TIPS: Record<string, Record<string,string>> = {
    "en": {
       required: "This field is required!,
      max: "The maximum value is {{max}}"
    }
}

export function getAutoTip(localeId: string, errorKey: string, error: any): string {
   const message = AUTO_TIPS[localeId][errorKey];

  if (message) {
     for (const key in error) {
        message = message.replace(`{{${key}}}`, error[key]);
     }
  }
  return message;
}
```<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->

[priorit-torben]

makes sense and sounds useful. pr?

[rehdie]

I haven’t looked at the autoTips example closely enough.

It seems to be easier to wrap these validators like in the example and return the localized messages in the error object directly (see MyValidators.maxLength).

I‘m closing this issue since there is already a way to implement the desired feature.