將預定義的驗證程序添加到Angular的自定義組件中

我正在開發一個自定義組件，以便與Angular中的窗體一起使用。我正在實施ControlValueAccessor接口，它工作得很好。將預定義的驗證程序添加到Angular的自定義組件中

但是，我的組件沒有理由不使用required驗證程序（它是驗證碼），因此組件的所有調用都必須指定required驗證程序。

是否有可能以某種方式嵌入這個驗證直接進入我的組件，所以它會與ngModel和形式使用時總是應用於它（包括基於模板和反應的）？

澄清。考慮的例子：上述

<my-captcha [(ngModel)]="firstCaptcha" required></my-captcha> 

<my-captcha [(ngModel)]="secondCaptcha" required></my-captcha> 

<my-captcha [(ngModel)]="thirdCaptcha" required></my-captcha>

MyCaptcha組件的所有調用則要使用required屬性，以便需要驗證要被施加到的表單控件。

是否可以在不明確指定required屬性的情況下調用我的自定義控制器，但是是否應用了驗證器？就像這樣：

<my-captcha [(ngModel)]="captchaValue"></my-captcha>

來源

2017-05-11 Slava Fomin II

對不起，我有點不專心，但是，你是什麼意思*需要驗證器*？你的意思是'required'屬性？ – SrAxi

是的，我的意思是組件的價值必須提供，否則它被認爲是無效的。 Angular在基於模板的表單中通過'required'屬性解決了這個問題。 –

我目前處於類似的情況。這是使用反應形式的選項嗎？到目前爲止我發現的一切可能有助於完成反應形式 – Arikael

組件的所有調用都會有指定要求驗證

這引發使用的想法，並abstract class和extend它。

所以，順便嵌入的required驗證您的所有表單組件可能是這樣的：

export abstract class FormValidationClass implements ControlValueAccessor { 
    // Implement your validation methods for your standard form including required validator 

    protected formModel:<any>;   

    protected constructor() { 
    } 

    public requiredValidatorMethod() { 
     // Do stuff here with formModel, for example 
    } 
}

，並在實際上創建您的組件，將有一個表格：

export class UserFilter extends FormValidationClass implements OnInit { 

     protected formModel:<any>; 

     this.requiredValidatorMethod (this.formModel); 
}

所以，只要你的類聲明protected formModel和extends FormValidationClass，你將能夠使用內012的方法，並避免每次爲每個具有表單的組件添加特定的邏輯。

這將是我的embeding邏輯包含表單中所有組件的方式，在這種情況下，嵌入required驗證所有包含該需要驗證形式的組件。

希望它有幫助或至少有用！讓我知道事情的後續！

乾杯！

來源

2017-05-11 11:25:25 SrAxi

謝謝你花時間寫出答案，但是，我認爲你錯誤地理解了我的問題。我已經澄清了一點。我所說的不是重複使用組件來定義另一個組件，而是將驗證器添加到組件本身，而不是它的調用。通過調用，我的意思是它是模板中的單一用法。 –

對，我想我明白了。看看這個：https：//angular.io/docs/ts/latest/cookbook/form-validation.html#!#component-template使代碼和屬性'required'中的驗證不需要*（他保留它爲造型目的）*。 – SrAxi

關於你的鏈接，他們沒有在自定義組件中封裝驗證器，他們只是將它從基於模板的形式中的'required'屬性移動到反應形式中的'Validators.required'符號。但他們仍然必須參考它。 –

將預定義的驗證程序添加到Angular的自定義組件中

回答

相關問題