angular - 检查是否需要 NgControl

Question

出于各种原因，我有几个包装 PrimeNG 组件的自定义组件。我的组件的一些实例以 react 形式使用，并且字段的“要求”是使用 Validators.required 验证器设置的。

PrimeNG 组件提供了一个required 属性。

如何检查组件的 NgControl 是否需要验证器？有 .disabled 和 .invalid，但 .invalid 可能意味着任何东西。

这是我现在使用的，它适用于下拉菜单，但对于任何其他类型的输入都是不正确的。

@Component({
  selector: 'my-component',
  templateUrl: 'my.component.html'
})
export class MyComponent implements OnInit, ControlValueAccessor {
  
  @Input()
  public disabled: boolean
  @Input()
  public required: boolean

  constructor(
        @Optional() @Self() public ngControl: NgControl
  ) {
        if (this.ngControl != null) {
            this.ngControl.valueAccessor = this;
        }
    }

    ngOnInit() {
        if (this.ngControl) {
            this.required = this.ngControl.invalid;
            this.disabled = this.ngControl.disabled;
        }
    }
}

我确信有更好的方法来做到这一点，但我不知道怎么做。

Answer 1

尝试检查控件是否具有必需的验证器，如下所示:

  ngOnInit() {
    if (this.ngControl) {
      this.required = this.hasRequiredValidator(this.ngControl.control);
      this.disabled = this.ngControl.disabled;
    }
  }

  hasRequiredValidator(control: AbstractControl): boolean {
    if (control.validator) {
      const validator = control.validator({} as AbstractControl);
      if (validator && validator.required) {
        return true;
      }
    }
    return false;
  }