Angular表单，使用NG-Zerro的messageService

Angular提交表单时，再次验证_董厂长的博客-CSDN博客这两天在看别人代码时候思考, 表单校验不只需要实时校验和失焦校验。举个例子，如果使用失焦校验，当用户填完表单，直接提交，那么会触发input框的校验，但是数据可以直接传入数据库，那么对于前端来说，需要处理好提交按钮，使得表单二次校验，并且在不通过的情况下，不传入任何数据。代码层面，可以使用循环来二次验证表单控件 xxx.controls //xxx是你传入的表单 //使用循环来对表单控件修改状态，并且重新激活验证 for (const i in xxx.controls) {https://blog.csdn.net/dongnihao/article/details/122854581?spm=1001.2014.3001.5502Angular使用指令来添加校验器_董厂长的博客-CSDN博客_angular 验证器之前查阅资料的时候，对于NG中的校验器，一般用法都是在本组件下继承验证器Validator接口，再添加到NG表单中实现校验。但是对于模板驱动型表单，一般的解决方法是使用将校验器添加到指令，或者说，创建一个自定义指令，在自定义指令中实现校验器。@Directive({ selector: '[customValidator]', providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi:https://blog.csdn.net/dongnihao/article/details/122663624?spm=1001.2014.3001.5502

//在你写指令时候import ant-desgin 的消息服务
import { NzMessageService } from 'ng-zorro-antd/message';

@Directive({
  selector: '[iamAFuckingValidator]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: IamAFuckingValidatorDirective,
      multi: true,
    },
  ],
})
export class IamAFuckingValidatorDirective {
//构造器中依赖注入消息服务，并生成实例
  constructor(private messageService: NzMessageService) {}
//这边是继承了Angular验证器的接口，实现其validate方法，要么返回null无错，或者返回一个对象
  validate(control: AbstractControl): ValidationErrors | null {
    return FuckingValidator(this.messageService)(control);
  }
}

看一下标准写法，继承Validator接口。并实现其validate方法。

 若是错误，返回一个对象，msg保存错误的提示消息。

export function iamAFuckingValidator(messageService: any): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    let isValid = true;
    if (control.value) {
      if (!isValid) {
        messageService.info('请输入有效字符');
        }
      }
    return isValid
      ? null
      : { iamAFuckingValidator: { value: control.value, msg: 'FUCK YOU ITS WRONG' } };
  };
}

这个时候，由于你依赖注入了message servcie，那么如果校验不通过，ant-desgin就会帮你跳出一个提醒框在网页上。

还是要注意思考一下依赖注入的灵活使用。

--------------------------------------------------------分割线----------------------------------------------------------------

或者可以定制化一些特殊的提醒方式

一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别 - 知乎原文今天当我在做 Angular 开发时，一个知识点引起了我的注意： 在检查 DOM 时，我看到 ngcontent 被 Angular 应用于元素。 嗯……如果它们包含了最终 DOM 中的元素，那么 ng-container 有什么用？ 当时我对 ng-co…https://zhuanlan.zhihu.com/p/389959042

        <ng-container *ngIf="control.hasError('iamAFuckingValidator')">
            {{ control.errors.numbValidator.msg }}
        </ng-container>

在视图层（.html）,可以使用</ng-container>。Angular ng-container 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放在 DOM 中。可以理解成把 div 标签放置到 ng-container 这个虚无的容器里，当 div 的 *ngIf 指令布尔值为 false 时，虚无的容器连同里面的 div 标签压根就不会生成。

说人话，你想做一个表单提醒框，输错了就出现，反之不出现。没输错情况下，这个dom元素就不要渲染它了，没用就去死好了。