Angular 7 + Ngx-Bootstrap Как проверить дату? - PullRequest
Новая
       29

Angular 7 + Ngx-Bootstrap Как проверить дату?

0 голосов
/ 01 мая 2019

Я использую ngx-bootstrap для выбора даты, мой выбор даты имеет формат ввода «дд / мм / гггг», например 25/07/2019

, поэтому я создаю компонент для захвата даты и конвертирую егов мою реактивную форму (потому что MySQL принимает дату как гггг-мм-дд).Я использую ngModel во входных данных и выполняю изменения значений каждый раз, когда пользователь вводил значение.

следующий код: 

import { environment } from './../../../environments/environment';
import { Component, OnInit, Input } from '@angular/core';
import { BsDatepickerConfig } from 'ngx-bootstrap';
import { FormGroup } from '@angular/forms';
import * as moment from "moment";

@Component({
  selector: 'app-input-date',
  templateUrl: './input-date.component.html',
  styleUrls: ['./input-date.component.css']
})
export class InputDateComponent implements OnInit {
    @Input() form: FormGroup;
    @Input() fieldName: string;
    @Input() fieldDescription: string;

    datePickerConfig: Partial<BsDatepickerConfig>;
    tempDate: any ; 
    isInvalid: boolean;

  constructor() {
    this.datePickerConfig = Object.assign(
        {},
        {
          containerClass: "theme-dark-blue",
          dateInputFormat: environment.dateFormat
        }
      );
  }

  ngOnInit() {
    let theDate = this.form.get(this.fieldName).value;
    if( theDate != ""){
        this.tempDate = moment(theDate, environment.mysqlDateFormat).format(environment.dateFormat);
    }
  }

  get myField()
  {
      return this.form.get(this.fieldName);
  }

  // For date
  onDateModelChange(event)
  { 
    if(this.tempDate != ""){
        this.form.patchValue({
            [this.fieldName]: moment(this.tempDate, environment.dateFormat).format(environment.mysqlDateFormat)
        });
    }else{
        this.form.patchValue({
            [this.fieldName]: ""
        });
    }
    console.log(this.form.get(this.fieldName).errors);
  }

}
<input type="text" class="form-control mydatepicker" 
placeholder="" id="mydatepicker"
[ngClass]="{'has-error': myField.touched && myField.hasError('required')}"
[(ngModel)]="tempDate" (ngModelChange)="onDateModelChange($event)" [ngModelOptions]="{standalone: true}"
[bsConfig]="datePickerConfig" bsDatepicker>

Теперь мне нужно отобразить ошибку, если пользователь забыл ввести дату или ввод даты был неверным.Я установил реактивную форму с помощью Validators.required, как 

this.form = this.formBuilder.group({ dateOfBirth: ["", Validators.required]});

Но поскольку я использую ngModel, он не будет проверен.Мне просто интересно, как проверять поле каждый раз, когда пользователь нажимает / вводит ввод (нетронутый или грязный)

Я пробовал этот код на моем InputDateComponent, но он всегда возвращает нуль 

onDateModelChange(event){
console.log(this.form.get(this.fieldName).errors);
}

Если выесть простые решения для формата даты, я хотел бы знать также ..

...