我們在構(gòu)建企業(yè)級應(yīng)用時稼锅，通常會遇到各種各樣的定制化功能，因為每個企業(yè)都有自己獨特的流程雄人、思維方式和行為習(xí)慣从橘。有很多時候，軟件企業(yè)是不太理解這種情況柠衍，習(xí)慣性的會給出一個診斷洋满，『你這么做不對，按邏輯應(yīng)該這樣這樣』珍坊。但企業(yè)往往不會接受這種說法牺勾，習(xí)慣的力量是強大的，我們一定要尊重這種事實阵漏。所以在構(gòu)建企業(yè)應(yīng)用的時候驻民，我們不僅僅要了解對方的基本需求翻具，也要了解他們習(xí)慣于怎么處理流程，在設(shè)計的時候需要予以充分重視回还。當然這也不是說客戶說怎么改我們就怎么改裆泳，而是要了解到對方真正的訴求和背后的原因，在產(chǎn)品規(guī)劃設(shè)計的時候柠硕，將這種因素考慮進去工禾，才能在維持產(chǎn)品統(tǒng)一的框架下滿足不同用戶的需求。
那么這里我們舉一個例子蝗柔，比如我們正在開發(fā)一個醫(yī)療衛(wèi)生領(lǐng)域的企業(yè)軟件闻葵，客戶要求提供一個出生日期的控件，但這個控件不光可以輸入年月日癣丧，而且可以輸入年齡數(shù)值以及選擇年齡單位槽畔。客戶的希望是：
- 填寫日期時胁编，年齡和年齡單位隨之變化
- 填寫年齡和選擇年齡單位時出生日期也隨之變化
看起來好像很無用的一個需求厢钧，這個在面向互聯(lián)網(wǎng)的應(yīng)用中確實如此。但在特定領(lǐng)域嬉橙，其實有其背景原因早直，比如客戶提出這個需求是由于很多人，尤其是小城鎮(zhèn)的憎夷，是不記公歷生日的莽鸿，這樣會導(dǎo)致出生日期不是很準確，另外還會有一些人的身份證日期和真實年齡是不一致的拾给。這種情況對于成人來說還好祥得，但對于兒童來說就偏差很大，但一般人會記得孩子現(xiàn)在是多少天或多少個月大蒋得。這樣的話是不是覺得這個需求還有些道理级及？
那么我們就接著來看一下這個需求應(yīng)該怎樣實現(xiàn)，首先分析一下：
- 無論是輸入出生日期還是年齡额衙，其實最終要得到一個日期饮焦，也就是說年齡只是得到日期的一個輔助手段。
- 年齡單位的轉(zhuǎn)換我們需要有一個界定窍侧，否則切換起來沒有規(guī)則的話會導(dǎo)致邏輯的混亂县踢。那這里我們定義一下：以天為單位時的上限為：90，下限為 0伟件，也就是只有小于等于 90 天的嬰兒我們會使用天作為年齡單位硼啤。類似的，以月為單位的上限為 24斧账，下限為 1谴返；以年為單位的上限為 150煞肾，下限為 1。
- 同樣的出生日期的驗證規(guī)則為：這個日期不能是未來的時間嗓袱，一定是小于等于當前時間的籍救，再有就是年齡的上限既然是 150，那么出生日期也不能比當前日期減去 150 年更早，對嗎？
- 聯(lián)動的規(guī)則應(yīng)該是調(diào)整出生日期時葡粒，會將日期按上面規(guī)則轉(zhuǎn)換成年齡和單位，改變控件中的值耸黑；而調(diào)整年齡或者單位的時候桃煎，我們會根據(jù)年齡推算出出生日期篮幢，當然這里是估算，以當前日期減去年齡得出为迈，然后更新出生日期輸入框中的值三椿。
但這里面有幾個值得注意的地方：
- 可能存在反復(fù)聯(lián)動的問題，比如改變出生日期后葫辐，年齡和單位隨之改變搜锰，這又引發(fā)了由年齡和單位的變化而導(dǎo)致的出生日期的重算。
- 如果輸入非法的值耿战，可能導(dǎo)致計算出現(xiàn)異常蛋叼，因而控件狀態(tài)出現(xiàn)不正確的狀態(tài)值，進一步影響未來的計算剂陡。
- 如果每次輸入改動都會引發(fā)重新計算狈涮，會帶來大量的過程中無用計算，耗費資源鸭栖，因此需要進行對輸入事件的『整流』控制歌馍。
搭建自定義表單控件的框架
首先為什么要實現(xiàn)一個自定義表單控件？我們當然可以直接把這個邏輯放在表單中晕鹊，但問題是表單真的需要關(guān)心這幾個框的聯(lián)動嗎松却？
其實從表單的角度看，它只要一個值：那就是經(jīng)過計算的出生日期溅话。至于你是手動輸入的還是按年齡和單位計算的晓锻，表單根本就不應(yīng)該關(guān)心。另外一點是隨著表單的復(fù)雜化飞几，如果我們不把這些邏輯剝離出去的話砚哆，我們的表單本身的邏輯就會越來越復(fù)雜。最后是循狰，封裝成表單控件意味著我們以后可以復(fù)用這個控件了窟社。
知道了 why券勺，我們看看 how。在 Angular 中實現(xiàn)一個自定義的表單控件還是比較簡單的灿里，下面是一個表單控件的骨架关炼。
import {ChangeDetectionStrategy, Component, forwardRef, OnInit, OnDestroy, Input} from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
@Component({
selector: 'app-age-input',
template: `
// 省略
`,
styles: [`
// 省略
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AgeInputComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => AgeInputComponent),
multi: true,
}
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgeInputComponent implements ControlValueAccessor {
private propagateChange = (_: any) => {};
constructor() { }
// 提供值的寫入方法
public writeValue(obj: Date)
}
// 當表單控件值改變時，函數(shù) fn 會被調(diào)用
// 這也是我們把變化 emit 回表單的機制
public registerOnChange(fn: any) {
this.propagateChange = fn;
}
// 這里沒有使用匣吊，用于注冊 touched 時的回調(diào)函數(shù)
public registerOnTouched() {
}
// 驗證表單儒拂，驗證結(jié)果正確返回 null 否則返回一個驗證結(jié)果對象
validate(c: FormControl): {[key: string]: any} {
// 省略
}
}
我們可以看到要實現(xiàn)一個表單控件的話，要實現(xiàn) ControlValueAccessor 這樣一個接口色鸳。這個接口顧名思義是用于寫入控件值的社痛，它是一個控件和原生 DOM 元素之間的橋梁，通過實現(xiàn)這個接口命雀，我們可以對原生 DOM 元素寫入值蒜哀。而這個接口需要實現(xiàn)三個必選方法： writeValue(obj: any) 、 registerOnChange(fn: any) 和 registerOnTouched(fn: any)吏砂。
-
writeValue(obj: any)：用于向元素中寫入值 -
registerOnChange(fn: any)：設(shè)置一個當控件接受到改變的事件時所要調(diào)用的函數(shù)撵儿。 -
registerOnTouched(fn: any)：設(shè)置一個當控件接受到 touch 事件時所要調(diào)用的函數(shù)。
另外的一個 validate(c: FormControl): {[key: string]: any} 是控件的驗證器函數(shù)狐血。除了這些函數(shù)淀歇，你應(yīng)該也注意到，我們注冊了兩個 provider匈织，一個的 token 是 NG_VALUE_ACCESSOR 這是將控件本身注冊到 DI 框架成為一個可以讓表單訪問其值的控件浪默。但問題來了，如果在元數(shù)據(jù)中注冊了控件本身缀匕，而此時控件仍為創(chuàng)建纳决，這怎么破？這就得用到 forwardRef 了弦追，這個函數(shù)允許我們引用一個尚未定義的對象岳链。另外一個 NG_VALIDATORS 是讓控件注冊成為一個可以讓表單得到其驗證狀態(tài)的控件
。當然這里還有一個奇怪的東西劲件，就是那個 multi: true,掸哑，這是聲明這個 token 對應(yīng)的類很多，分散在各處零远。
控件的界面
我們這里使用了 @angular/material 的 input苗分、 datepicker和 button-toggle 控件來分別實現(xiàn)日期輸入、年齡輸入和年齡單位的選擇牵辣。注意到我們在里面使用了響應(yīng)式表單摔癣，這感覺好像有點怪，我們本身不是一個表單控件嗎？怎么自己的模板還是一個表單择浊？這個其實沒啥問題戴卜，因為 Angular 中的組件是和外界隔離的，所以組件自身的模板其實想怎么使用都可以琢岩。
<div [formGroup]="form" class="age-input">
<div>
<md-input-container>
<input mdInput [mdDatepicker]="birthPicker" type="text" placeholder="出生日期" formControlName="birthday" >
<button mdSuffix [mdDatepickerToggle]="birthPicker" type="button"></button>
<md-error>日期不正確</md-error>
</md-input-container>
<md-datepicker touchUi="true" #birthPicker></md-datepicker>
</div>
<ng-container formGroupName="age">
<div class="age-num">
<md-input-container>
<input mdInput type="number" placeholder="年齡" formControlName="ageNum">
</md-input-container>
</div>
<div>
<md-button-toggle-group formControlName="ageUnit" [(ngModel)]="selectedUnit">
<md-button-toggle *ngFor="let unit of ageUnits" [value]="unit.value">
{{ unit.label }}
</md-button-toggle>
</md-button-toggle-group>
</div>
<md-error class="mat-body-2" *ngIf="form.get('age').hasError('ageInvalid')">年齡或單位不正確</md-error>
</ng-container>
</div>
上面這個模板中值得注意的一點是投剥，我們把年齡的數(shù)值和單位放在了一個 FormGroup 里面，這是由于這兩個值組合在一起才有意義担孔，而且后面的表單驗證也是這兩個值在一起組合后驗證江锨。
使用 Rx 的事件流來重新梳理邏輯
私以為 Rx 的兩大優(yōu)點：
- 由于在 Rx 世界里，一切都是事件流糕篇，所以這『逼迫』開發(fā)者將時間維度納入設(shè)計的考量
- 提供的各種強大的操作符可以將邏輯非常輕松的組合
那么從 Rx 的角度看的話啄育，這個控件會產(chǎn)生三個事件流：出生日期、年齡數(shù)值和年齡單位：
出生日期：-------d----------d---------------d--------------
年齡數(shù)值：----------num----------num----------------num----
年齡單位：----unit-------------unit-------------unit-------
寫成代碼的話就是下面的樣子拌消，Angular 的響應(yīng)式表單為我們提供了非常便利的方法可以得到這些變化的事件流挑豌，FormControl 的 valueChanges 屬性就是一個 Observable 。
// 得到出生日期的值的變化流
const birthday$ = this.form.get('birthday').valueChanges;
// 得到年齡數(shù)值的變化流
const ageNum$ = this.form.get('age').get('ageNum').valueChanges;
// 得到年齡單位的變化流
const ageUnit$ = this.form.get('age').get('ageUnit').valueChanges;
由于年齡數(shù)值和年齡單位需要合并在一起才有意義拼坎，所以這兩個流需要做一個合并操作浮毯，而且不管是數(shù)值變化還是單位變化，我們都要在新的合并流中有一個反映：
年齡數(shù)值：----------n1----------------n2------------------n3-------
年齡單位：----u1-------------u2------------------u3----------------
合并后： ------（n1,u1）--(n1,u2)--(n2,u2)----(n2,u3)---(n3,u3)---
仔細觀察一下泰鸡，你可能會發(fā)現(xiàn)這個合并流還有一個特點就是只有在參與合并的兩個流都有事件產(chǎn)生后才會有合并的事件發(fā)生，在這之后就是任何一個參與合并的流有新的事件壳鹤，合并流就會產(chǎn)生一個事件盛龄，這個合并的值會取剛剛發(fā)生的那個事件和另一個參與合并的流中的『最新』事件。這種合并方法在 Rx 中叫做 combineLatest：
const age$ = Observable
.combineLatest(ageNum$, ageUnit$, (_num, _unit) => this.toDate({age: _num, unit: _unit}));
上面的代碼中芳誓，我們將年齡數(shù)值的事件流（ageNum$）以及年齡單位的事件流（ageUnit$）做了合并余舶，而且通過一個 this.toDate 的工具函數(shù)將年齡和單位計算出了一個估算的出生日期。
出生日期：-------d----------d---------------d--------------
年齡合并：---d^----d^----d^---d^--------d^------d^---------
// 年齡合并后產(chǎn)生的出生日期用 d^ 來標識
現(xiàn)在看起來這兩個流都產(chǎn)生日期锹淌，只不過是不同的控件變化引起的匿值。那么我們應(yīng)該可以把它們也做一個合并，這個合并就比較簡單赂摆，可以想象成按照各自流中的位置把兩個流做投影挟憔。
最終合并：---d^--d--d^----d^--d-d^-------d^--d----d^-------
而這種合并在 Rx 中叫做 merge
const merge$ = Observable.merge(birthday$, age$);
但為了要能區(qū)分這個日期是來自于出生日期那個輸入框還是來自于年齡和單位的輸入變化，我們得標識出這個日期的來源烟号。所以我們需要對 birthday$ 和 age$ 做一個變換處理绊谭，不在單純的發(fā)射日期，而是將日期和來源組合成一個新的對象 {date: string; from: string} 發(fā)射汪拥。
const birthday$ = this.form.get('birthday').valueChanges
.map(d => ({date: d, from: 'birthday'}));
const age$ = Observable
.combineLatest(ageNum$, ageUnit$, (_num, _unit) => this.toDate({age: _num, unit: _unit}))
.map(d => ({date: d, from: 'age'}));
這樣處理之后达传，我們就可以根據(jù)不同情況，根據(jù)日期設(shè)置年齡和單位，或者反之宪赶，由年齡和單位的變化設(shè)置出生日期宗弯。
this.subBirth = merged$.subscribe(date => {
const age = this.toAge(date.date);
const ageNum = this.form.get('age').get('ageNum');
const ageUnit = this.form.get('age').get('ageUnit');
if(date.from === 'birthday') {
if(age.age === ageNum.value && age.unit === ageUnit.value) {
return;
}
ageUnit.patchValue(age.unit, {emitEvent: false, emitModelToViewChange: true, emitViewToModelChange: true});
ageNum.patchValue(age.age, {emitEvent: false});
this.selectedUnit = age.unit;
this.propagateChange(date.date);
} else {
const ageToCompare = this.toAge(this.form.get('birthday').value);
// 如果要設(shè)置的日期換算成年齡和單位，如果這兩個值和現(xiàn)有控件的值是一樣的搂妻，那就沒有必要更新日期的值了
if(age.age !== ageToCompare.age || age.unit !== ageToCompare.unit) {
this.form.get('birthday').patchValue(date.date, {emitEvent: false});
this.propagateChange(date.date);
}
}
});
大致的邏輯就是這樣了罕伯，但我們還有幾個問題需要解決
- 現(xiàn)在的情況是不管你以多快的速度輸入日期，或者輸錯了按
backspace都會產(chǎn)生新的事件叽讳，也因此會有計算追他。但顯然這樣做一方面浪費了性能，另一方面會導(dǎo)致一些不合法的值大量出現(xiàn)（比如本來要輸入2000-12-11, 但事實上現(xiàn)在當你剛剛敲了 2 岛蚤，事件就已經(jīng)產(chǎn)生了邑狸，但顯然年份 2 不是一個合理的出生年份，我們畢竟不是在做一個考古信息系統(tǒng)）涤妒。 - 當你和上一次輸入相同的值時单雾，現(xiàn)在的系統(tǒng)仍然會發(fā)射事件，但這其實是在做無用功她紫。
- 我們現(xiàn)在的事件流沒有經(jīng)過一個驗證就會把數(shù)據(jù)發(fā)射出來硅堆，但一個沒有驗證成功的值其實對我們來說是沒有意義的。
- 年齡和單位的合并流只有在年齡和單位都產(chǎn)生變化的時候才開始發(fā)射贿讹，但一開始的初始狀態(tài)渐逃，這兩個控件并沒有值，這顯然不是我們希望的（比如你可能不想填完年齡民褂，例如 30茄菊，然后還得點一下『天』，再點回『歲』來得到合并計算的值）赊堪。
const birthday$ = this.form.get('birthday').valueChanges
.map(d => ({date: d, from: 'birthday'}))
.debounceTime(300)
.distinctUntilChanged()
.filter(date => this.form.get('birthday').valid);
const ageNum$ = this.form.get('age').get('ageNum').valueChanges
.startWith(this.form.get('age').get('ageNum').value)
.debounceTime(300)
.distinctUntilChanged();
const ageUnit$ = this.form.get('age').get('ageUnit').valueChanges
.startWith(this.form.get('age').get('ageUnit').value)
.debounceTime(300)
.distinctUntilChanged();
const age$ = Observable
.combineLatest(ageNum$, ageUnit$, (_num, _unit) => this.toDate({age: _num, unit: _unit}))
.map(d => ({date: d, from: 'age'}))
.filter(_ => this.form.get('age').valid);
const merged$ = Observable
.merge(birthday$, age$)
.filter(_ => this.form.valid);
上面的代碼中面殖，我們使用 debounceTime 過濾掉了短時間內(nèi)的輸入，等待用戶略有停頓或輸入完成時才發(fā)射新的事件哭廉。我們還使用了 distinctUntilChanged 來過濾掉和之前一樣的輸入脊僚。而 startWith 其實是在幫事件流拼接一個初始值，使得合并流按我們想像中那樣運行遵绰。那么 filter 則是屏蔽掉驗證未通過的數(shù)據(jù)辽幌。
這樣簡單的通過幾個 Rx 的操作符我們就完成了核心邏輯，而且在核心邏輯不變的前提下對數(shù)據(jù)驗證街立、事件的『整流』舶衬、篩選等進行了調(diào)整。
總結(jié)和思考
針對復(fù)雜的表單赎离，我們通常應(yīng)該使用『復(fù)雜問題簡單化』的方法將一個復(fù)雜問題拆分成多個簡單問題逛犹。對于較復(fù)雜的表單來講，自定義表單控件是一個很有用的可以簡單化表單邏輯，封裝局部邏輯的一種方法虽画。
而使用 Rx 進行邏輯的組裝舞蔽、轉(zhuǎn)換、拼接以及合并是非常容易的事情码撰，而且 Rx 的事件流特點會讓你把邏輯梳理的非常清晰渗柿，以時間維度把業(yè)務(wù)邏輯的先后和組裝的次序考慮周全。
源碼
import {ChangeDetectionStrategy, Component, forwardRef, OnInit, OnDestroy, Input} from '@angular/core';
import { ControlValueAccessor, FormBuilder, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import {
subYears,
subMonths,
subDays,
isBefore,
differenceInDays,
differenceInMonths,
differenceInYears,
parse
} from 'date-fns';
import {Observable} from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { toDate, isValidDate } from '../../utils/date.util';
export enum AgeUnit {
Year = 0,
Month,
Day
}
export interface Age {
age: number;
unit: AgeUnit;
}
@Component({
selector: 'app-age-input',
template: `
<div [formGroup]="form" class="age-input">
<div>
<md-input-container>
<input mdInput [mdDatepicker]="birthPicker" type="text" placeholder="出生日期" formControlName="birthday" >
<button mdSuffix [mdDatepickerToggle]="birthPicker" type="button"></button>
<md-error>日期不正確</md-error>
</md-input-container>
<md-datepicker touchUi="true" #birthPicker></md-datepicker>
</div>
<ng-container formGroupName="age">
<div class="age-num">
<md-input-container>
<input mdInput type="number" placeholder="年齡" formControlName="ageNum">
</md-input-container>
</div>
<div>
<md-button-toggle-group formControlName="ageUnit" [(ngModel)]="selectedUnit">
<md-button-toggle *ngFor="let unit of ageUnits" [value]="unit.value">
{{ unit.label }}
</md-button-toggle>
</md-button-toggle-group>
</div>
<md-error class="mat-body-2" *ngIf="form.get('age').hasError('ageInvalid')">年齡或單位不正確</md-error>
</ng-container>
</div>
`,
styles: [`
.age-num{
width: 50px;
}
.age-input{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: baseline;
}
`],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => AgeInputComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => AgeInputComponent),
multi: true,
}
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AgeInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
selectedUnit = AgeUnit.Year;
form: FormGroup;
ageUnits = [
{value: AgeUnit.Year, label: '歲'},
{value: AgeUnit.Month, label: '月'},
{value: AgeUnit.Day, label: '天'}
];
dateOfBirth;
@Input() daysTop = 90;
@Input() daysBottom = 0;
@Input() monthsTop = 24;
@Input() monthsBottom = 1;
@Input() yearsBottom = 1;
@Input() yearsTop = 150;
@Input() debounceTime = 300;
private subBirth: Subscription;
private propagateChange = (_: any) => {};
constructor(private fb: FormBuilder) { }
ngOnInit() {
const initDate = this.dateOfBirth ? this.dateOfBirth : toDate(subYears(Date.now(), 30));
const initAge = this.toAge(initDate);
this.form = this.fb.group({
birthday: [initDate, this.validateDate],
age: this.fb.group({
ageNum: [initAge.age],
ageUnit: [initAge.unit]
}, {validator: this.validateAge('ageNum', 'ageUnit')})
});
const birthday = this.form.get('birthday');
const ageNum = this.form.get('age').get('ageNum');
const ageUnit = this.form.get('age').get('ageUnit');
const birthday$ = birthday.valueChanges
.map(d => ({date: d, from: 'birthday'}))
.debounceTime(this.debounceTime)
.distinctUntilChanged()
.filter(date => birthday.valid);
const ageNum$ = ageNum.valueChanges
.startWith(ageNum.value)
.debounceTime(this.debounceTime)
.distinctUntilChanged();
const ageUnit$ = ageUnit.valueChanges
.startWith(ageUnit.value)
.debounceTime(this.debounceTime)
.distinctUntilChanged();
const age$ = Observable
.combineLatest(ageNum$, ageUnit$, (_num, _unit) => this.toDate({age: _num, unit: _unit}))
.map(d => ({date: d, from: 'age'}))
.filter(_ => this.form.get('age').valid);
const merged$ = Observable
.merge(birthday$, age$)
.filter(_ => this.form.valid)
.debug('[Age-Input][Merged]:');
this.subBirth = merged$.subscribe(date => {
const age = this.toAge(date.date);
if(date.from === 'birthday') {
if(age.age === ageNum.value && age.unit === ageUnit.value) {
return;
}
ageUnit.patchValue(age.unit, {emitEvent: false, emitModelToViewChange: true, emitViewToModelChange: true});
ageNum.patchValue(age.age, {emitEvent: false});
this.selectedUnit = age.unit;
this.propagateChange(date.date);
} else {
const ageToCompare = this.toAge(this.form.get('birthday').value);
if(age.age !== ageToCompare.age || age.unit !== ageToCompare.unit) {
this.form.get('birthday').patchValue(date.date, {emitEvent: false});
this.propagateChange(date.date);
}
}
});
}
ngOnDestroy() {
if(this.subBirth) {
this.subBirth.unsubscribe();
}
}
public writeValue(obj: Date) {
if (obj) {
const date = toDate(obj);
this.form.get('birthday').patchValue(date, {emitEvent: false});
}
}
public registerOnChange(fn: any) {
this.propagateChange = fn;
}
public registerOnTouched() {
}
validate(c: FormControl): {[key: string]: any} {
const val = c.value;
if (!val) {
return null;
}
if (isValidDate(val)) {
return null;
}
return {
ageInvalid: true
};
}
validateDate(c: FormControl): {[key: string]: any} {
const val = c.value;
return isValidDate(val) ? null : {
birthdayInvalid: true
}
}
validateAge(ageNumKey: string, ageUnitKey:string): {[key: string]: any} {
return (group: FormGroup): {[key: string]: any} => {
const ageNum = group.controls[ageNumKey];
const ageUnit = group.controls[ageUnitKey];
let result = false;
const ageNumVal = ageNum.value;
switch (ageUnit.value) {
case AgeUnit.Year: {
result = ageNumVal >= this.yearsBottom && ageNumVal <= this.yearsTop
break;
}
case AgeUnit.Month: {
result = ageNumVal >= this.monthsBottom && ageNumVal <= this.monthsTop
break;
}
case AgeUnit.Day: {
result = ageNumVal >= this.daysBottom && ageNumVal <= this.daysTop
break;
}
default:
result = false;
}
return result ? null : {
ageInvalid: true
}
}
}
private toAge(dateStr: string): Age {
const date = parse(dateStr);
const now = new Date();
if (isBefore(subDays(now, this.daysTop), date)) {
return {
age: differenceInDays(now, date),
unit: AgeUnit.Day
};
} else if (isBefore(subMonths(now, this.monthsTop), date)) {
return {
age: differenceInMonths(now, date),
unit: AgeUnit.Month
};
} else {
return {
age: differenceInYears(now, date),
unit: AgeUnit.Year
};
}
}
private toDate(age: Age): string {
const now = new Date();
switch (age.unit) {
case AgeUnit.Year: {
return toDate(subYears(now, age.age));
}
case AgeUnit.Month: {
return toDate(subMonths(now, age.age));
}
case AgeUnit.Day: {
return toDate(subDays(now, age.age));
}
default: {
return this.dateOfBirth;
}
}
}
}
慕課網(wǎng) Angular 視頻課上線： http://coding.imooc.com/class/123.html?mc_marking=1fdb7649e8a8143e8b81e221f9621c4a&mc_channel=banner
