поле даты проверки угловых 5 с использованием построителя форм - PullRequest
Новая
       66

поле даты проверки угловых 5 с использованием построителя форм

0 голосов
/ 05 июля 2018

У меня есть форма, и я хочу проверить поле даты при отправке, я использую Form Builder, как я могу это сделать (угловой способ)? Другая проблема, почему я не могу увидеть значение опубликованного_даты в поле даты? Я пытался найти, и не могу найти решение для поля ввода даты. 

unamePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
  ngOnInit() {
    this.book = 
      {
        id: 55,
        author_name : "vv",
        published_date :  new Date('01/02/2018'),
        title : "cc"
      };
      
      this.form = this.formBuilder.group({
        title : ['', Validators.required],
        author : ['', Validators.required],
        datePublish: ['', Validators.pattern(this.unamePattern)],
        }
      );
  }
<input 
            [(ngModel)]="book.published_date"
            id="dateOfBirth" 
            class="form-control" 
            placeholder="yyyy-mm-dd" 
            name="dp" 
            ngbDatepicker 
            formControlName="datePublish"
            #dp="ngbDatepicker">
            
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="dp.toggle()" type="button">
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
          </div>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Для проверки даты вы можете использовать ng4-validators . 

npm i ng4-validators --save

Импорт и использование: 

import { CustomValidators } from 'ng4-validators';

ngOnInit() {
  this.book = 
    {
      id: 55,
      author_name : "vv",
      published_date :  new Date('01/02/2018'),
      title : "cc"
    };

    this.form = this.formBuilder.group({
      title : ['', Validators.required],
      author : ['', Validators.required],
      datePublish: ['', CustomValidators.date,
      }
    );
  }
0 голосов
/ 05 июля 2018

Если бы вы могли использовать momemt(), тогда вам будет очень легко получить информацию о дате и времени, и вы можете написать свой собственный валидатор как 

import {AbstractControl} from '@angular/forms';
import * as moment from 'moment';

export class YourValidator {
  static dateVaidator(AC: AbstractControl) {
    if (AC && AC.value && !moment(AC.value, 'YYYY-MM-DD',true).isValid()) {
      return {'dateVaidator': true};
    }
    return null;
  }
}

И в вашем объекте формы вы можете использовать его как 

import {YourValidator} from "....";

this.form = this.formBuilder.group({
    title : ['', Validators.required],
    author : ['', Validators.required],
    datePublish: ['', Validators.compose([Validators.required, YourValidator.dateVaidator])],
});

Демонстрация stackblitz.com/angular-date-validator

...