Question

我正试图做这样的事

@Directive({
  selector: '[myVal][myCustomInputToComponent]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyVal), multi: true }
  ]
})
export class MyVal implements OnInit, Validator {

  @Input() input: any;

  constructor(private el: ElementRef) {
  }
  ngOnInit(): void {
    console.log('validator input', this.input);

  }

  validate(): { [key: string]: any } {
    console.log('validate', this.input)

    return {
      validatorName: {
        valid: false
      }
    };
  }
}

显然没有调用validate方法。但是也许可以通过某种方式来检测具有有效和无效状态的组件。我们不仅仅使用FormControl与客户进行互动吗？

Answer 1

Karina，您无法验证任何组件。您可以验证特殊组件：自定义表单控件。在自定义窗体控件中，可以在自定义窗体控件内部或外部创建验证器。但这必须实现ControlValueAccessor。

当然，您可以拥有一个组件，例如在输入中调用一个函数，但实际上不是验证

如果您的自定义表单控件内部具有验证器，则您的自定义表单控件必须添加为提供程序NG_VALIDATORS，并且类似

@Component({
  selector: 'app-custom-form-control',
  template: `...
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomFormControl),
      multi: true
    },
    {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => CustomFormControl),
  multi: true,
}
  ]

})
export class CustomFormControl implements ControlValueAccessor {

  onChange;
  onTouched;

  constructor(el:ElementRef){}
  writeValue(value: any[]|any): void {
        ...receive a value, make something to show it...
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
  }

  //A function that, when some happens, send a change
  setValue(value: any) {
    this.onChange(...)
  }

  focusOut()
  {
    this.onTouched()
  }

  validate(control: AbstractControl): ValidationErrors | null{
     ..your logic here..
    return null
  }
}

是否可以为自定义组件（而不是FormControl）创建验证器？

1 个答案: