Question

我可以在自定义组件上使用required属性吗？我的组件如下所示：

import { Component, Input, forwardRef } from '@angular/core';
import { Platform } from 'ionic-angular';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DatePickerComponent),
  multi: true
};

@Component({
  selector: 'date-picker',
  templateUrl: 'date-picker.html',
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class DatePickerComponent implements ControlValueAccessor {
  @Input("label") label: string;
  @Input("pickerFormat") pickerFormat: string;
  @Input("displayFormat") displayFormat: string;
  @Input("max") max: string;
  @Input("min") min: string;
  @Input("cancelText") cancel: string;
  @Input("doneText") done: string;
  @Input("valid") valid: boolean;
  @Input("disabled") disabled: boolean;

  private _mobile: boolean = false;
  private _date: string;

  constructor(private plt: Platform) {
    if (plt.is("mobile"))
      this._mobile = true;
  }

  get date(): string {
    return this._date;
  }

  set date(value: string) {
    this._date = value;
    this.onChange(this._date);
  }

  public onChange(value: any): void { }

  public onTouched(): void { }

  public writeValue(obj: any): void {
    if (this.date !== obj) {
      this.date = obj;
    }
  }

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

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

如果_date（或date）为空或不是有效日期（因为最小/最大），我希望我的表单使用此组件来禁用提交按钮。有什么方法可以为我的组件实现这样的东西吗？

感谢您的帮助！

Answer 1

让它实现Validator界面：

export class DatePickerComponent implements ControlValueAccessor, Validator {...}

它只需要一个函数validate：

public validate(c: FormControl) {
  // Business logic. If no error, return null, if not : 
  return { required: true };
}

需要角度自定义组件

1 个答案: