подтвердите положительное число и недействительную дату

Question

как я могу проверить, чтобы входные данные были положительным числом, а дата была не меньше текущей даты? я использую угловой 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]

})

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

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

Answer 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"/>