根據(jù)thinkgram.io，當(dā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"角度驗證將忽略它：因此，當(dāng)firstValue ngModel <0時，要使表單導(dǎo)致錯誤，是否需要構(gòu)建自定義驗證器？
3 回答
慕的地6264312
TA貢獻1817條經(jīng)驗 獲得超6個贊
我發(fā)現(xiàn)一個實現(xiàn)許多自定義驗證器的庫-ng2-validation-可與模板驅(qū)動的表單（屬性指令）一起使用。例：
<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="someNumber.errors?.range">Must be in range</p>
富國滬深
TA貢獻1790條經(jīng)驗 獲得超9個贊
通過創(chuàng)建實現(xiàn)該Validator接口的指令，您可以輕松實現(xiàn)自己的驗證（模板驅(qū)動）。
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)注
- 696 瀏覽
添加回答
舉報
0/150
提交
取消