根據(jù)thinkgram.io，當(dāng)前支持的驗(yàn)證器為：需要最小長(zhǎng)度最長(zhǎng)長(zhǎng)度圖案因此，請(qǐng)考慮以下代碼（此處為plunkr）：@Component({ selector: 'my-app', template: ` <form #formRef="ngForm"> <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/> <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/> <button type="submit"> Submit </button> </form> FORM: {{formRef.form | json }}`})export class AppComponent { firstValue = -22; secondValue = "eyy macarena!"; }雖然minlength受支持，但min="0"角度驗(yàn)證將忽略它：因此，當(dāng)firstValue ngModel <0時(shí)，要使表單導(dǎo)致錯(cuò)誤，是否需要構(gòu)建自定義驗(yàn)證器？
3 回答
慕的地6264312
TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超6個(gè)贊
我發(fā)現(xiàn)一個(gè)實(shí)現(xiàn)許多自定義驗(yàn)證器的庫-ng2-validation-可與模板驅(qū)動(dòng)的表單（屬性指令）一起使用。例：
<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="someNumber.errors?.range">Must be in range</p>
富國(guó)滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
通過創(chuàng)建實(shí)現(xiàn)該Validator接口的指令，您可以輕松實(shí)現(xiàn)自己的驗(yàn)證（模板驅(qū)動(dòng)）。
import { Directive, Input, forwardRef } from '@angular/core'
import { NG_VALIDATORS, Validator, AbstractControl, Validators } from '@angular/forms'
@Directive({
selector: '[min]',
providers: [{ provide: NG_VALIDATORS, useExisting: MinDirective, multi: true }]
})
export class MinDirective implements Validator {
@Input() min: number;
validate(control: AbstractControl): { [key: string]: any } {
return Validators.min(this.min)(control)
// or you can write your own validation e.g.
// return control.value < this.min ? { min:{ invalid: true, actual: control.value }} : null
}
}
- 3 回答
- 0 關(guān)注
- 705 瀏覽
添加回答
舉報(bào)
0/150
提交
取消