Проверить положительное число и недопустимую дату УГЛОВАЯ ФОРМА

как я могу подтвердить, что ввод является положительным числом, а дата не меньше текущей даты? Я использую угловой FormControl / FormBuilder / FormFroup мой код:

html:

   <p>Enter price:</p>
    <input type = "number" formControlName = "couponPrice">
    <div class = "alert" *ngIf = "!addCouponForm.controls['couponPrice'].valid && 
    addCouponForm.controls['couponPrice'].touched ">{{priceReq}}</div></td>
        <td>
   <p>Enter coupon's start date:</p>
  <input type = "date" formControlName = "couponStartDate">
  <div class = "alert" *ngIf = "!addCouponForm.controls['couponStartDate'].valid 
  && addCouponForm.controls['couponStartDate'].touched ">{{startDateReq}} 
  </div>
   </td>

составная часть:

  this.addCouponForm = fb.group({
  'couponTitle':  [null,[Validators.required,Validators.minLength(5),Validators.maxLength(20)]],
  'couponStartDate': [null,Validators.required],
  'couponEndDate': [null,Validators.required],
  **'couponAmount': [null,Validators.required],**
  'couponType': [null,Validators.required],
  'couponMessage': [null,[Validators.required,Validators.minLength(5),Validators.maxLength(20)]],
  **'couponPrice': [null,Validators.required],**
  'couponImage': [null,Validators.required]

})

поля со знаком * - это поле, в котором я хочу убедиться, что пользователь вводит действительный номер.

большое спасибо

Вы можете использовать Validators.min(0), чтобы убедиться, что он положительный

— 30.06.2018 17:05

спасибо, что насчет свидания?

— 30.06.2018 17:06

html angular forms validation angular-reactive-forms

30.06.2018 17:04

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 255

Ответы 1

Вы можете использовать min='0' для положительного числа.

и min = "currentDate" для отключения прошлой даты.

установить библиотеку moment для формата даты

npm install moment --save

У меня есть демо на Stackblitz

component.ts

import moment from 'moment';
export class AppComponent implements onInit {

  currentDate = moment().format('YYYY-MM-DD');
  constructor() {}
}

component.html

<input type = "number" formControlName = "couponPrice" min = "0"/>
<input type = "date" min = "{{currentDate}}" formControlName = "couponStartDate"/>

это работает прямо сейчас, спасибо .. как я могу убедиться, что дата окончания всегда будет позже даты начала? как я могу сохранить значение даты начала и использовать его в качестве минимального значения даты окончания?

— 30.06.2018 23:44

30.06.2018 21:29