不叫Angular2自定義驗證

我寫了一個自定義的驗證指令那樣：不叫Angular2自定義驗證

const DURATION_VALIDATOR = new Provider(
    NG_VALIDATORS, 
    {useExisting: forwardRef(() => DurationDirective), multi: true} 
); 


@Directive({ 
    selector: '[ngModel][duration], [formControl][duration]', 
    providers: [{ 
     provide: NG_VALIDATORS, 
     useExisting: forwardRef(() => DurationDirective), 
     multi: true }] 
}) 
export class DurationDirective implements Validator{ 
    constructor(public model:NgModel){ 
     console.error('init') 
    } 
    validate(c:FormControl) { 
     console.error('validate') 
     return {'err...':'err...'}; 
    } 
}

我的HTML看起來像這樣：

<input 
    type="text" 
    [(ngModel)]="preparation.duration" 
    duration 
    required 
>

我的問題是，雖然驗證被初始化，即' init'被記錄到控制檯，驗證函數永遠不會被調用，即在輸入字段中輸入時，「驗證」從不記錄到控制檯。由於驗證程序已初始化，因此我假設我「正確」連接了所有內容。那麼缺少什麼？

來源

2016-07-29 schacki

我的最好的辦法是，你有沒有bootstraped角與問候形式：

import { App } from './app'; 
import { disableDeprecatedForms, provideForms } from '@angular/forms'; 

bootstrap(App, [ 
    // these are crucial 
    disableDeprecatedForms(), 
    provideForms() 
    ]);

你可以看到這個plunk - 它輸出"validate"到控制檯。

來源

2016-07-29 21:29:19 Dethariel

我已將disableDeprecatedForms（），provideForms（）添加到我的組件提供程序屬性中。但這似乎沒有任何影響。你能解釋爲什麼嗎？這是我更新的plunk https://plnkr.co/edit/ztuBIZc3QMRwMg62scZR?p=preview – schacki

這個plunk仍然沒有在bootstrap（）調用中提供兩個調用。將您在提供者屬性中的兩個調用移動到引導方法可以解決問題。 https://plnkr.co/edit/b2PipR?p=preview – batesiiic

對不起，這是一個誤解。我故意將提供的調用從引導方法轉移到my-app組件來說明我的問題：我的假設是將2個調用添加到組件提供程序中就足夠了。你能解釋爲什麼不能？ – schacki

我分叉的和改進的@batesiiic的普拉克：https://plnkr.co/edit/Vokcid?p=preview

validate(c:FormControl) { 
    console.error('called validate()') 
    return parseInt(c.value) < 10 ? null : { 
     duration: {message: 'Please enter a number < 10'} 
    }; 
}

的validate（）方法必須返回null如果輸入是有效的，否則，它返回一個對象{鍵：值，... }其中key是錯誤的類型，值可以是任何可以在模板中用來生成錯誤消息的值。

如果輸入無效，模板還包含一個div以顯示錯誤消息。

來源

2016-08-10 19:00:53

而不是將自定義驗證器函數編寫爲類/組件/指令方法，在組件/指令之外編寫自定義驗證器應該可行。

validate(c:FormControl) { 
    console.error('validate') 
    return {'err...':'err...'}; 
} 

@Directive({ 
    selector: '[ngModel][duration], [formControl][duration]', 
    providers: [{ 
     provide: NG_VALIDATORS, 
     useExisting: forwardRef(() => DurationDirective), 
     multi: true }] 
}) 
export class DurationDirective implements Validator{ 
    constructor(public model:NgModel){ 
     console.error('init') 
    } 

}

來源

2017-03-25 17:15:02

不叫Angular2自定義驗證

回答

相關問題