CODEWITHSUNDEEP
angularjsvalidationangularjs-directive
Phương Nguyễn
Phương Nguyễn

Reputation: 8905

Validation input handled by nested directive

Basically I want to display validation message of an ngModel at a parent directive, but the input is handled inside a nested directive.

So far the validation is not propagated and the only way I can find so far is to $watch the $valid and $error variable from the nested directive and find a way to propagate it to the parent.

I have come across require: "^ngModel" but per my last try, it doesn't propage the validation to parent scope.

Wonder if there is a way to do so, beside the hack trying to watch the $error and propage it up?

Edit: Here is a codepen demonstrate my issue: http://codepen.io/anon/pen/GJygp

In the code pen, I have 2 directive: parent-directive and child-directive. The validation is handled inside the child-directive but I want to display the validation message at the parent-directive.

Upvotes: 2

Views: 1724

Answers (1)

gkalpak
gkalpak

Reputation: 48211

For this kind of stuff, the form/ngForm directive is really useful.
It instantiates a FormController and gives you access to every input or select child element (with an ngModel and a name). I strongly advice taking a close look at the relevant documentation (linked above).

Among others, you can access the validity status of any child element (referecingit by its name), like this:

<!-- Creates a `parentForm` property in the current scope -->
<!-- that will give access to child control-elements      -->
<div ng-form name="parentForm">
    <!-- Creates a child control-element, whose properties  -->
    <!-- will be accessible under `parentForm.childControl` -->
    <input type="text" name="childControl" ng-model="someModel" />

    <!-- Uses the various properties of the child control-element          -->
    <!-- available to the parent from-element (through the FormController) -->
    <div>
        Child control-element info:<br />
        pristine: {{parentForm.childControl.$pristine}}<br />
        dirty:    {{parentForm.childControl.$dirty}}   <br />
        valid:    {{parentForm.childControl.$valid}}   <br />
        invalid:  {{parentForm.childControl.$invalid}} <br />
    </div>
</div>

See, also, this short demo based on your original codepen.

Upvotes: 2

Related Questions