嗨,我在有角项目中使用mydatepicker
。
https://www.npmjs.com/package/mydatepicker
Git网址
https://github.com/kekeh/mydatepicker#readme
我有一个查询,在我的演示应用程序中,我有两个日期字段(DOB,签发日期Pancard)。当用户选择 DOB大于签发Pancard日期时,我想显示错误消息反之亦然。如何在按钮单击
上以角度比较或验证日期字段这是我的代码 https://stackblitz.com/edit/angular-ypzjrk?file=src%2Fapp%2Fapp.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IMyDpOptions } from 'mydatepicker';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
showError =false;
cf: FormGroup;
datePickerOptions: IMyDpOptions = {
dateFormat: 'dd/mm/yyyy',
};
constructor(private fb: FormBuilder) {
this.cf = this.fb.group({
dateOfBirth: ['',[Validators.required]],
pancard: ['',[Validators.required]]
})
}
onSubmit() {
this.showError =true;
}
}
答案 0 :(得分:0)
您应该能够创建一个使用两个控件名称的自定义组验证器。
this.cf = this.fb.group({
dateOfBirth: ['',[Validators.required]],
pancard: ['',[Validators.required]]
},
{
validator: [
dateCheckValidator('dateOfBirth','pancard')
]
})
并将Validator实施为类似
export function dateCheckValidator(input1: string, input2: string) {
return function (formGroup: FormGroup) {
let dobControl = formGroup.get(input1);
let pancardControl = formGroup.get(input2);
// ... logic here
if(error){
return {'dateError': true};
}
return null;
}
}
答案 1 :(得分:0)
检查更新的答案: https://stackblitz.com/edit/angular-4wksfn?file=src/app/app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IMyDpOptions } from 'mydatepicker';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
showError =false;
cf: FormGroup;
datePickerOptions: IMyDpOptions = {
dateFormat: 'dd/mm/yyyy',
};
constructor(private fb: FormBuilder) {
this.cf = this.fb.group({
dateOfBirth: ['',[Validators.required]],
pancard: ['',[Validators.required]]
})
}
onSubmit() {
const formVal=this.cf.value;
let dateOfBirth=formVal.dateOfBirth.epoc;
let pancard=formVal.pancard.epoc;
if(dateOfBirth > pancard)
{
this.showError =true;
}else{
this.showError =false;
}
}
}
<form novalidate [formGroup]="cf">
<div class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
<p class="fs-12 color-grey text-uppercase">Date of Birth<span class="color-red fontWt"> *(DD/MM/YYYY)</span></p>
<my-date-picker [options]="datePickerOptions"
formControlName="dateOfBirth"></my-date-picker>
<span class="error-msg mt--10"
*ngIf="(cf.get('dateOfBirth').dirty || showError)
&& cf.get('dateOfBirth').errors
&& cf.get('dateOfBirth').errors.required">Please select date of birth.</span>
</div>
<div class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
<p class="fs-12 color-grey text-uppercase">Date of issue pan card<span class="color-red fontWt"> *(DD/MM/YYYY)</span></p>
<my-date-picker [options]="datePickerOptions"
formControlName="pancard"></my-date-picker>
<span class="error-msg mt--10"
*ngIf="(cf.get('pancard').dirty || showError)
&& cf.get('pancard').errors
&& cf.get('pancard').errors.required">Please select pancard issue date.</span>
</div>
<div *ngIf="showError" class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
<p class="fs-12 color-red text-uppercase" style="color:red">Error: DOB greater than date of issue pancard, input correct date</p>
</div>
<button (click)=onSubmit()>submit</button>
</form>