时间戳

首页 > 解决方案 > 如何验证包含对象的输入字段

javascript - 如何验证包含对象的输入字段

问题描述

如何检查所需的输入字段是否为空，formControl 无法读取对象...

  public discountParamsForm = new FormGroup({
     name: new FormControl('', Validators.required),
     type: new FormControl('', Validators.required),
     status: new FormControl('', Validators.required),
     value: new FormControl('', [Validators.required, Validators.pattern(/^([0-9]{1,2}){1}(\.[0-9]{1,2})?$/),
       Validators.min(1), Validators.max(100)]),
     dateInput: new FormControl('', Validators.required),
     categorySelect: new FormControl('', Validators.required)
  });

<input formControlName="dateInput" fullWidth type="text" [(ngModel)]="dateRange"
           nbInput placeholder="{{pickDateUI}}" [nbDatepicker]="datepicker">
    <nb-rangepicker (rangeChange)="onDateChange($event)" format="yyyy-MM-dd" #datepicker></nb-rangepicker>

用于 value 和 discountparamsform 的 console.log

用户界面

标签： javascripthtmlangularformsnebular

解决方案

永远，永远不要在同一个标​​签中[(ngModel)]使用formControlName

好吧，使用自定义 Validator。

discountParamsForm = new FormGroup({
    ...
    dateInput: new FormControl('', this.validatorRange()),
})

validatorRange(){
  return (control:AbstractControl)=>{
     if (!control.value.start)
         return {error:'start date is mandatory'}
     if (!control.value.end)
         return {error:'end date is mandatory'}
  }
}

看到控件始终是具有属性“start”和“end”的对象-因此始终具有值，因此在自定义验证器中我们检查此属性是否具有值-

推荐阅读