Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Validation in the template directive
Message
 
 
General information
Forum:
Javascript
Category:
Other
Miscellaneous
Thread ID:
01627375
Message ID:
01627399
Views:
31
>>Hi everybody,
>>
>>I'm wondering what is the proper way of using validations in the template for directive.
>>
>>Here is what we have right now in the template:
>>
>>
>> <div class="form-group">
>>            <label class="sr-only">@Labels.firstName:</label>
>>            <input class="form-control" name="firstName" id="firstName"
>>            type="text"  ng-maxlength="100"
>>            ng-required="validationRequired" placeholder=@Labels.firstName data-ng-model="currentData.firstName">
>>        </div>
>>        <div class="form-group">
>>            <input class="form-control" type="text" size="1" ng-maxlength="100"
>>            placeholder=@Labels.middle data-ng-model="currentData.middleName">
>>        </div>
>>        <div class="form-group">
>>            <input class="form-control" type="text" ng-required="validationRequired" name="lastName" id="lastName" ng-maxlength="100"
>>            placeholder=@Labels.last data-ng-model="currentData.lastName">
>>        </div>
>>        <div class="form-group">
>>            <input class="form-control" type="text" placeholder=@Labels.suffix data-ng-model="currentData.suffix">
>>        </div>
>>        <div class="form-group">
>>            <div class="col-md-12 field-validation-error" >
>>                <span ng-show="validationRequired && ((currentData.firstName.length == null) || (currentData.firstName.length === 0))">
>>                    @String.Format(Messages.isRequired, Labels.firstName)
>>                </span>
>>
>>                <span ng-show="currentData.firstName.length>100">
>>                    @String.Format(Messages.cannotExceed, String.Format(Labels.firstName, "1"), 100)
>>                </span>
>>            </div>
>>        </div>
>>
>>Instead of that, I want to have the 'normal' way of fields validations like we have in the forms, e.g.
>>
>>
>><div class="col-md-7">
>>                <input type="text" name="nickname" id="nickname"
>>                       ng-model="currentAccount.acctName" class="form-control"
>>                       ng-maxlength="10"
>>                       ng-model-options="{allowInvalid:true}"
>>                       placeholder="@Labels.nickname" required data-sm:focus="isNew" />
>>               
>>                <div class="field-validation-error">
>>                    <span ng-show="form.editAccountGeneral.nickname.$error.required && form.editAccountGeneral.nickname.$dirty">
>>                        @String.Format(Messages.isRequired, Labels.nickname)
>>                    </span>
>>                    <span ng-show="form.editAccountGeneral.nickname.$error.maxlength && form.editAccountGeneral.nickname.$dirty">
>>                        @String.Format(Messages.cannotExceed, Labels.nickname, "10")
>>                    </span>
>>                </div>
>>            </div>
>>
>>The directive does have the following (e.g. name of the form is required):
>>
>>
>>app.directive('smContact', ['resourceFactory', function (resourceFactory) {
>>        return {
>>            restrict: 'E',
>>            scope: {
>>                currentData: '=',
>>                isNew: '=',
>>                contactLabel: '@?',
>>                validationRequired: '=',
>>                showChooseContact: '=',
>>                form: '='
>>            },
>>
>>So, my question is - how to use that 'form' in the fields validations inside the template?
>>
>>Thanks in advance.
>
>Would not defining the template directive as a form (ng-form) do the trick?
>Seems to me that having the directive depend on an outer (potentially unknown) form breaks encapsulation......
>IIRC, with nested forms the outer form validity is dependent the validity of its inner forms.

This sounds like a good idea. Not sure why it was not designed as a form (it was not designed by me). It can be nested inside another ng-form.
If it's not broken, fix it until it is.


My Blog
Previous
Reply
Map
View

Click here to load this message in the networking platform