Is there a need to set ng-required and ng-minlength for an input?

Question

I've been doing some tests and it would seem that just setting required="required" and minlength="5" does exactly that same thing as setting the ng- versions.

Has anyone else come across this?

Answer 1

When you are sure of whether the field is required or the minimum length of the input, input name=n required minlength=12 is fine. But when there are variables/functions governing those decisions, minlength=name.minLength, wouldn't make sense.

Then we need to use input ng-required="isThisTrue()" ng-minlength="name.minLength".

Answer 2

The required and minlength attributes are HTML5 form validation tools. When you want to implement validation, you can use HTML5 attributes or Angular validation directives. The advantage of using the Angular directives is that you can access a lot of features like:

• Custom class depending of the form state:
  • ng-valid: the model is valid
  • ng-invalid: the model is invalid
  • ng-pristine: the control hasn't been interacted with yet
  • ng-dirty: the control has been interacted with
  • ng-touched: the control has been blurred
  • ng-untouched: the control hasn't been blurred

You also have the above properties for each element in the form:

<form name="my_form" novalidate>
    <input type="text" ng-model="user.name" name="user_name" required="" />
    <div ng-show="my_form.user_name.$touched">You have make changes to the field</div>
    <div ng-show="my_form.$submitted || my_form.user_name.$touched">
        <div ng-show="form.uName.$error.required">You don't have a name :(</div>
    </div>
</div>

Also, as you can notice in the example above, you can show a custom error message for each validation rule.