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

我在the reference上创建了一个演示

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

验证正数和无效日期ANGULAR FORM

1 个答案: