Angular Валидатор DatePicker для материала в FormBuilder - PullRequest
Новая
       36

Angular Валидатор DatePicker для материала в FormBuilder

0 голосов
/ 25 января 2020

Имеет ли Angular встроенный валидатор FormBuilder для Angular Выбор даты материала? (точно так же как адрес электронной почты?)

У меня есть Formbuilder с Validators.required, однако, набрав в 'abcde', также можно выполнить хорошую проверку. Мы должны разрешать только даты в формате даты, выбранном в формате mat, дд / мм / гггг.

Попытка выяснить, может ли что-то не так работать с упаковщиком даты: 

this.editSharedForm = this.formBuilder.group({
      'homephoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],
      'mobilephoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],
      'emailAddress': [null, [Validators.maxLength(50), Validators.email]],
      'effectiveStartDate': [null, [Validators.required, Validators.maxLength(200),]],
      'effectiveEndDate': [null, [Validators.maxLength(200)]],

Datepicker html: 

<div class="datepicker-wrap">
    <mat-form-field appearance="outline">
        <mat-label>{{Label}}</mat-label>
        <input matInput
            [matDatepicker]="picker"
            placeholder={{PlaceHolder}}
            [ngModel]="Value"
            [errorStateMatcher]="errorMatcher()"

            (input)="onChange($event.target.value)"
            (blur)="onTouched()"
            (dateChange)="saveValueAction($event)"
            (ngModelChange)="Value=$event"
            >
        <mat-datepicker-toggle matSuffix [for]="picker">
            <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
        </mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
        <mat-hint>{{Hint}}</mat-hint>
    </mat-form-field>
</div>

Машинописный текст: при необходимости 

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ]
})

// Resource: https://stackoverflow.com/questions/47885568/custom-component-mddatepicker-used-in-reactive-form

export class DatePickerComponent implements OnInit {

  @Input() PlaceHolder: string;
  @Input() Label: string;
  @Input() Hint = '';

  private _Value: Date;
  @Input() set Value(value: Date) {
    this._Value = value;
    this.onChange(value);
  }
  get Value(): Date {
    return this._Value;
  }
  @Input() errors: any = null;
  @Output() dateValueAction = new EventEmitter();
  @Output() onStateChange = new EventEmitter();
  @Output() saveValue = new EventEmitter();
  disabled: boolean;
  control: FormControl;

  constructor(public injector: Injector) {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      setTimeout(() => {
        this.control = ngControl.control as FormControl;
      })
    }
  }

  saveValueAction(e) {
    this.saveValue.emit(e.target.value);
  }

  //control value accessor init
  writeValue(value: any) {
    this.Value = value ? value : '';
  }

  onChange = (_: any) => { };

  onTouched: any = () => { };

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

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

  setDisabledState(isDisabled) { this.disabled = isDisabled; }

  errorMatcher() {
    return new CustomFieldErrorMatcher(this.control, this.errors)
  }

  readonly errorStateMatcher: ErrorStateMatcher = {
    isErrorState: (ctrl: FormControl) => (ctrl && ctrl.invalid)
  };

}

export class CustomFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private customControl: FormControl, private errors: any) { }

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return this.customControl && this.customControl.touched && (this.customControl.invalid || this.errors);
  }
}
...