在我的angular(8)应用程序中,这是一种反应形式,有两个字段。
我已经实现了年龄计算,降低了选择Dob压延机的时间。 代码如下
dob: new FormControl('', Validators.required),
age: new FormControl('', Validators.max(120)),
和html:
<div class="row clearfix">
<div class="col-sm-3">
<div class="form-group">
<label for="dob">Date Of Birth (mm/dd/yyyy)
<span style="color: red;">*</span></label>
<div class="input-field col s12">
<input type="date" class="flatPicker" ngbDatepicker #d="ngbDatepicker" [readonly]="true"
[minDate]="{ year: 1900, month: 1, day: 1 }" formControlName="dob" [maxDate]="maxDate"
#dobToDisplay />
<button class="flatPicker" (click)="d.toggle()">
<span class="fa fa-calendar">{{dobToDisplay.value | date}}</span>
</button>
<div *ngIf="
patientForm.controls.dob.touched &&
!patientForm.controls.dob.valid
" class="text text-danger">
Date of Birth is required
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="age">Age<span style="color: red;">*</span></label>
<div class="input-field col s12">
<input id="age" type="text" formControlName="age" type="number" />
<div *ngIf="
patientForm.controls.age.touched &&
!patientForm.controls.age.valid
" class="text text-danger">
Age entry is wrong
</div>
</div>
</div>
现在正在呼叫valueChanges.subscribe
ngOnInit() {
this.dobValueChanged();
this.ageValueChanged();
}
和
dobValueChanged() {
this.patientForm.get('dob').valueChanges.subscribe(
(dob: Date) => {
let oDob
if (dob != null) {
oDob = new Date(dob['year'], dob['month'] - 1, dob['day']);
//console.log(oDob);
const today = new Date();
let age = today.getFullYear() - oDob.getFullYear();
//console.log(age);
// this.patientForm.setValue({ age: age });
this.patientForm.patchValue(
{ age: age }
);
}
}
);
}
它可以正常工作,并选择日期,它可以计算年龄并设置为我的年龄。 现在,当在年龄字段中输入任何内容时,现在也要设置DOB。 这就是方法。我要根据年龄来计算年份,而月份和日期将是今天的月份和日期。并转换为“ MM / dd / yyyy”并进行修补,仍然无法正常工作。
ageValueChanged() {
const todayYear: number = this.today.getFullYear();
this.patientForm.get('age').valueChanges.subscribe(
age => {
const today = new Date();
console.log(todayYear);
const calculatedDobYear = (todayYear - age) - 1;
console.log(calculatedDobYear);
const calculatedDob = new Date(calculatedDobYear, today.getMonth(), today.getDate());
console.log(calculatedDob);
const pipe = new DatePipe('en-US');
const myFormattedDate = pipe.transform(calculatedDob, 'MM/dd/yyyy');
console.log(myFormattedDate);
// const toSet = this.datePipe.transform(calculatedDob, 'yyyy-MM-dd');
// const toSet = calculatedDob.toISOString().substring(0, 10);
//console.log(toSet);
this.patientForm.patchValue(
{ dob: myFormattedDate }
);
}
);
}