Question

我正在使用表单构建器/反应性表单，并且需要验证具有非原始类型值的自定义组件，该组件是输入框+下拉选择。

this.dataForm = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  description: ['', [Validators.required, Validators.minLength(10)]],
  amount: [0, InputDropdownValidation.validateRange(0, 10)], // <<< Custom component
  cost: [0]
});

我在输入中使用了一个验证器，它实现了ControlValueAccessor以使用反应形式。现在，我希望它可以验证用于此组件值的对象类型：InputDropdownItem，而不只是输入。

static validateRange(min, max) {
  return function (control: AbstractControl) {
    if (control.value < min || control.value > max) {
      return { outOfRange: true };
    }
    return null;
  };
}

我可以用这个

console.log('validator prop = ', control.value.input);    
console.log('validator prop = ', control.value.dropdownItem);

我想要某种定义，以便该功能仅适用于值类型为InputDropdownItem的控件。因此，如果开发人员这样做：

console.log('validator prop = ', control.value.nonExistingProp); // undefined

它将首先在编译器中捕获。

金额组成部分：

  value: InputDropdownItem;

  // ...

  onInputChange(input: any) {
    this.value.input = input;
    this.valueChange.emit(this.value);
    this.propagateChange(this.value);
  }

  onDropdownChange(dropdownItem: DropdownItem) {
    this.value.dropdownItem = dropdownItem;
    this.valueChange.emit(this.value);
    this.propagateChange(this.value);
  }

InputDropdownItem

export class InputDropdownItem {
  input: any;
  dropdownItem: DropdownItem;
}

如何限制/定义control.value的类型（AbstractControl）

0 个答案: